cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

ssb: prettier.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 16m29s
Details

Browse Source
This commit is contained in:
Cory McWilliams 2024-12-05 20:47:02 -05:00
parent bfeb0c2988
commit 7da3244da2
6 changed files with 201 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/ssb/tf-app.js
View File

@ -72,7 +72,8 @@ class TfElement extends LitElement {
} }
async load_channels() { async load_channels() {
let channels = await tfrpc.rpc.query(` let channels = await tfrpc.rpc.query(
`
SELECT SELECT
content ->> 'channel' AS channel, content ->> 'channel' AS channel,
content ->> 'subscribed' AS subscribed content ->> 'subscribed' AS subscribed
@ -82,7 +83,9 @@ class TfElement extends LitElement {
author = ? AND author = ? AND
content ->> 'type' = 'channel' content ->> 'type' = 'channel'
ORDER BY sequence ORDER BY sequence
`, [this.whoami]); `,
[this.whoami]
);
let channel_map = {}; let channel_map = {};
for (let row of channels) { for (let row of channels) {
if (row.subscribed) { if (row.subscribed) {
@ -243,7 +246,8 @@ class TfElement extends LitElement {
}; };
by_count.push({count: v.of, id: id}); by_count.push({count: v.of, id: id});
} }
let channels = tfrpc.rpc.query(` let channels = tfrpc.rpc.query(
`
SELECT channels.value AS channel, MAX(messages.rowid) AS rowid FROM messages SELECT channels.value AS channel, MAX(messages.rowid) AS rowid FROM messages
JOIN json_each(?1) AS channels ON messages.content ->> 'channel' = channels.value JOIN json_each(?1) AS channels ON messages.content ->> 'channel' = channels.value
JOIN json_each(?2) AS following ON messages.author = following.value JOIN json_each(?2) AS following ON messages.author = following.value
@ -257,12 +261,16 @@ class TfElement extends LitElement {
SELECT '@' AS channel, MAX(messages.rowid) AS rowid FROM messages_fts(?3) SELECT '@' AS channel, MAX(messages.rowid) AS rowid FROM messages_fts(?3)
JOIN messages ON messages.rowid = messages_fts.rowid JOIN messages ON messages.rowid = messages_fts.rowid
JOIN json_each(?2) AS following ON messages.author = following.value JOIN json_each(?2) AS following ON messages.author = following.value
`, [ `,
[
JSON.stringify(this.channels), JSON.stringify(this.channels),
JSON.stringify(Object.keys(following)), JSON.stringify(Object.keys(following)),
'"' + this.whoami.replace('"', '""') + '"', '"' + this.whoami.replace('"', '""') + '"',
]); ]
this.channels_unread = JSON.parse((await tfrpc.rpc.databaseGet('unread')) ?? '{}'); );
this.channels_unread = JSON.parse(
(await tfrpc.rpc.databaseGet('unread')) ?? '{}'
);
let start_time = new Date(); let start_time = new Date();
users = await this.fetch_about(Object.keys(following).sort(), users); users = await this.fetch_about(Object.keys(following).sort(), users);
console.log( console.log(
@ -275,7 +283,9 @@ class TfElement extends LitElement {
start_time = new Date(); start_time = new Date();
channels = await channels; channels = await channels;
console.log('channels took', (new Date() - start_time) / 1000.0); console.log('channels took', (new Date() - start_time) / 1000.0);
this.channels_latest = Object.fromEntries(channels.map(x => [x.channel, x.rowid])); this.channels_latest = Object.fromEntries(
channels.map((x) => [x.channel, x.rowid])
);
this.following = Object.keys(following); this.following = Object.keys(following);
this.users = users; this.users = users;
console.log(`load finished ${whoami} => ${this.whoami}`); console.log(`load finished ${whoami} => ${this.whoami}`);
@ -375,7 +385,10 @@ class TfElement extends LitElement {
}; };
let tabs = html` let tabs = html`
<div class="w3-bar w3-theme-l1" style="position: sticky; top: 0; z-index: 10"> <div
class="w3-bar w3-theme-l1"
style="position: sticky; top: 0; z-index: 10"
>
<button <button
class="w3-bar-item w3-button w3-circle w3-ripple" class="w3-bar-item w3-button w3-circle w3-ripple"
@click=${this.refresh} @click=${this.refresh}
@ -415,8 +428,7 @@ class TfElement extends LitElement {
style="width: 100vw; min-height: 100vh; height: 100%" style="width: 100vw; min-height: 100vh; height: 100%"
class="w3-theme-dark" class="w3-theme-dark"
> >
${tabs} ${tabs} ${contents}
${contents}
</div> </div>
`; `;
} }

6
apps/ssb/tf-compose.js
View File

@ -537,9 +537,9 @@ class TfComposeElement extends LitElement {
class="w3-card-4 w3-theme-d4 w3-padding-small" class="w3-card-4 w3-theme-d4 w3-padding-small"
style="box-sizing: border-box" style="box-sizing: border-box"
> >
${this.channel !== undefined ? ${this.channel !== undefined
html`<p>To #${this.channel}:</p>` : ? html`<p>To #${this.channel}:</p>`
undefined} : undefined}
${this.render_encrypt()} ${this.render_encrypt()}
<div class="w3-container w3-padding-small"> <div class="w3-container w3-padding-small">
<div class="w3-half"> <div class="w3-half">

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

@ -324,14 +324,16 @@ ${JSON.stringify(mention, null, 2)}</pre
} }
mark_unread() { mark_unread() {
this.dispatchEvent(new CustomEvent('channelsetunread', { this.dispatchEvent(
new CustomEvent('channelsetunread', {
bubbles: true, bubbles: true,
composed: true, composed: true,
detail: { detail: {
channel: this.channel, channel: this.channel,
unread: this.message.rowid, unread: this.message.rowid,
}, },
})); })
);
} }
render_channels() { render_channels() {
@ -360,7 +362,9 @@ ${JSON.stringify(mention, null, 2)}</pre
} }
let class_background = this.message?.decrypted let class_background = this.message?.decrypted
? 'w3-pale-red' ? 'w3-pale-red'
: (this.message?.rowid >= this.channel_unread ? 'w3-theme-d2' : 'w3-theme-d4'); : this.message?.rowid >= this.channel_unread
? 'w3-theme-d2'
: 'w3-theme-d4';
let self = this; let self = this;
let raw_button; let raw_button;
switch (this.format) { switch (this.format) {
@ -640,11 +644,16 @@ ${JSON.stringify(content, null, 2)}</pre
<button class="w3-button w3-theme-d1" @click=${this.react}> <button class="w3-button w3-theme-d1" @click=${this.react}>
React React
</button> </button>
${(!content.root && this.message.rowid < this.channel_unread) ? ${!content.root && this.message.rowid < this.channel_unread
html` ? html`
<button class="w3-button w3-theme-d1" @click=${this.mark_unread}>Mark Unread</button> <button
` : class="w3-button w3-theme-d1"
undefined} @click=${this.mark_unread}
>
Mark Unread
</button>
`
: undefined}
</p> </p>
${this.render_children()} ${this.render_children()}
</div> </div>

17
apps/ssb/tf-news.js
View File

@ -192,14 +192,17 @@ class TfNewsElement extends LitElement {
<div> <div>
${final_messages.map( ${final_messages.map(
(x) => (x) =>
html` html` ${x.rowid == unread_rowid && x != final_messages[0]
${x.rowid == unread_rowid && x != final_messages[0] ? ? html`<div style="display: flex; flex-direction: row">
html`<div style="display: flex; flex-direction: row"> <div
<div style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"></div> style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"
></div>
<div style="color: #f00; padding: 8px">unread</div> <div style="color: #f00; padding: 8px">unread</div>
<div style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"></div> <div
</div>` : style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"
undefined} ></div>
</div>`
: undefined}
<tf-message <tf-message
.message=${x} .message=${x}
whoami=${this.whoami} whoami=${this.whoami}

52
apps/ssb/tf-tab-news-feed.js
View File

@ -30,13 +30,15 @@ class TfTabNewsFeedElement extends LitElement {
this.drafts = {}; this.drafts = {};
this.expanded = {}; this.expanded = {};
this.channels_unread = {}; this.channels_unread = {};
this.start_time = (new Date()).valueOf(); this.start_time = new Date().valueOf();
this.time_range = [0, 0]; this.time_range = [0, 0];
this.loading = 0; this.loading = 0;
} }
channel() { channel() {
return this.hash.startsWith('##') ? this.hash.substring(2) : this.hash.substring(1); return this.hash.startsWith('##')
? this.hash.substring(2)
: this.hash.substring(1);
} }
async fetch_messages(start_time, end_time) { async fetch_messages(start_time, end_time) {
@ -52,12 +54,14 @@ class TfTabNewsFeedElement extends LitElement {
messages.timestamp > ?3 AND messages.timestamp > ?3 AND
messages.timestamp < ?4 messages.timestamp < ?4
ORDER BY timestamp DESC limit 20 ORDER BY timestamp DESC limit 20
`, [ `,
[
'"' + this.whoami.replace('"', '""') + '"', '"' + this.whoami.replace('"', '""') + '"',
JSON.stringify(this.following), JSON.stringify(this.following),
start_time, start_time,
end_time, end_time,
]); ]
);
return r; return r;
} else if (this.hash.startsWith('#@')) { } else if (this.hash.startsWith('#@')) {
let r = await tfrpc.rpc.query( let r = await tfrpc.rpc.query(
@ -248,7 +252,10 @@ class TfTabNewsFeedElement extends LitElement {
let start_time = now - 24 * 60 * 60 * 1000; let start_time = now - 24 * 60 * 60 * 1000;
this.start_time = start_time; this.start_time = start_time;
this.time_range = [this.start_time, now + 24 * 60 * 60 * 1000]; this.time_range = [this.start_time, now + 24 * 60 * 60 * 1000];
messages = await this.fetch_messages(this.time_range[0], this.time_range[1]); messages = await this.fetch_messages(
this.time_range[0],
this.time_range[1]
);
messages = await this.decrypt(messages); messages = await this.decrypt(messages);
if (!messages.length) { if (!messages.length) {
let more = []; let more = [];
@ -268,16 +275,21 @@ class TfTabNewsFeedElement extends LitElement {
} }
mark_all_read() { mark_all_read() {
let newest = this.messages.reduce((accumulator, current) => Math.max(accumulator, current.rowid), -1); let newest = this.messages.reduce(
(accumulator, current) => Math.max(accumulator, current.rowid),
-1
);
if (newest >= 0) { if (newest >= 0) {
this.dispatchEvent(new CustomEvent('channelsetunread', { this.dispatchEvent(
new CustomEvent('channelsetunread', {
bubbles: true, bubbles: true,
composed: true, composed: true,
detail: { detail: {
channel: this.channel(), channel: this.channel(),
unread: newest + 1, unread: newest + 1,
}, },
})); })
);
} }
} }
@ -296,19 +308,33 @@ class TfTabNewsFeedElement extends LitElement {
if (!this.hash.startsWith('#@') && !this.hash.startsWith('#%')) { if (!this.hash.startsWith('#@') && !this.hash.startsWith('#%')) {
more = html` more = html`
<p> <p>
<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>Mark All Read</button> <button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>
<button ?disabled=${this.loading} class="w3-button w3-theme-d1" @click=${this.load_more}> Mark All Read
</button>
<button
?disabled=${this.loading}
class="w3-button w3-theme-d1"
@click=${this.load_more}
>
Load More Load More
</button> </button>
<button class=${'w3-button w3-theme-d1' + (this.loading ? '' : ' w3-hide')} @click=${this.cancel_load}> <button
class=${'w3-button w3-theme-d1' + (this.loading ? '' : ' w3-hide')}
@click=${this.cancel_load}
>
Cancel Cancel
</button> </button>
<span>Showing ${new Date(this.time_range[0]).toLocaleDateString()} - ${new Date(this.time_range[1]).toLocaleDateString()}.</span> <span
>Showing ${new Date(this.time_range[0]).toLocaleDateString()} -
${new Date(this.time_range[1]).toLocaleDateString()}.</span
>
</p> </p>
`; `;
} }
return html` return html`
<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>Mark All Read</button> <button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>
Mark All Read
</button>
<tf-news <tf-news
id="news" id="news"
whoami=${this.whoami} whoami=${this.whoami}

104
apps/ssb/tf-tab-news.js
View File

@ -110,9 +110,11 @@ class TfTabNewsElement extends LitElement {
} }
unread_status(channel) { unread_status(channel) {
if (this.channels_latest[channel] && if (
this.channels_latest[channel] &&
(this.channels_unread[channel] === undefined || (this.channels_unread[channel] === undefined ||
this.channels_unread[channel] < this.channels_latest[channel])) { this.channels_unread[channel] < this.channels_latest[channel])
) {
return '🔵'; return '🔵';
} }
} }
@ -140,7 +142,7 @@ class TfTabNewsElement extends LitElement {
if (subscribed) { if (subscribed) {
this.channels = [].concat([channel], this.channels).sort(); this.channels = [].concat([channel], this.channels).sort();
} else { } else {
this.channels = this.channels.filter(x => x != channel); this.channels = this.channels.filter((x) => x != channel);
} }
} }
@ -149,7 +151,8 @@ class TfTabNewsElement extends LitElement {
} }
render() { render() {
let profile = this.hash.startsWith('#@') && this.hash != '#@' let profile =
this.hash.startsWith('#@') && this.hash != '#@'
? html`<tf-profile ? html`<tf-profile
class="tf-profile" class="tf-profile"
id=${this.hash.substring(1)} id=${this.hash.substring(1)}
@ -171,41 +174,82 @@ class TfTabNewsElement extends LitElement {
</div>`; </div>`;
} }
return html` return html`
<div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0; z-index: 5" id="sidebar"> <div
<div class="w3-right w3-button w3-hide-large" @click=${this.hide_sidebar}>&times;</div> class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ? style="width: 2in; left: 0; z-index: 5"
html` id="sidebar"
>
<div
class="w3-right w3-button w3-hide-large"
@click=${this.hide_sidebar}
>
&times;
</div>
${this.hash.startsWith('##') &&
this.channels.indexOf(this.hash.substring(2)) == -1
? html`
<div class="w3-bar-item w3-theme-d2">Viewing</div> <div class="w3-bar-item w3-theme-d2">Viewing</div>
<a href="#" class="w3-bar-item w3-button" style="font-weight: bold">${this.hash.substring(2)}</a> <a
` : href="#"
undefined} class="w3-bar-item w3-button"
style="font-weight: bold"
>${this.hash.substring(2)}</a
>
`
: undefined}
<div class="w3-bar-item w3-theme-d2">Channels</div> <div class="w3-bar-item w3-theme-d2">Channels</div>
<a href="#" class="w3-bar-item w3-button" style=${this.hash == '#' ? 'font-weight: bold' : undefined}>general ${this.unread_status('')}</a> <a
<a href="#@" class="w3-bar-item w3-button" style=${this.hash == '#@' ? 'font-weight: bold' : undefined}>@mentions ${this.unread_status('@')}</a> href="#"
${this.channels.map(x => html` class="w3-bar-item w3-button"
style=${this.hash == '#' ? 'font-weight: bold' : undefined}
>general ${this.unread_status('')}</a
>
<a
href="#@"
class="w3-bar-item w3-button"
style=${this.hash == '#@' ? 'font-weight: bold' : undefined}
>@mentions ${this.unread_status('@')}</a
>
${this.channels.map(
(x) => html`
<a <a
href=${'#' + encodeURIComponent('#' + x)} href=${'#' + encodeURIComponent('#' + x)}
class="w3-bar-item w3-button" class="w3-bar-item w3-button"
style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a> style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}
`)} >#${x} ${this.unread_status(x)}</a
</div>
<div class="w3-overlay" id="sidebar_overlay" @click=${this.hide_sidebar}></div>
<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
<div id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div>
<p>
<button
class="w3-button w3-theme-d1"
@click=${this.show_more}
> >
`
)}
</div>
<div
class="w3-overlay"
id="sidebar_overlay"
@click=${this.hide_sidebar}
></div>
<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
<div
id="show_sidebar"
class="w3-left w3-button w3-hide-large"
@click=${this.show_sidebar}
>
&#9776;
</div>
<p>
<button class="w3-button w3-theme-d1" @click=${this.show_more}>
${this.new_messages_text()} ${this.new_messages_text()}
</button> </button>
${this.hash.startsWith('##') ? ${this.hash.startsWith('##')
html` ? html`
<button class="w3-button w3-theme-d1" @click=${this.channel_toggle_subscribed}> <button
${this.channels.indexOf(this.hash.substring(2)) != -1 ? 'Unsubscribe from #' : 'Subscribe to #'}${this.hash.substring(2)} class="w3-button w3-theme-d1"
@click=${this.channel_toggle_subscribed}
>
${this.channels.indexOf(this.hash.substring(2)) != -1
? 'Unsubscribe from #'
: 'Subscribe to #'}${this.hash.substring(2)}
</button> </button>
` : `
undefined} : undefined}
</p> </p>
<div class="w3-bar"> <div class="w3-bar">
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>! Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!