tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

ssb: prettier.

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

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

@ -72,7 +72,8 @@ class TfElement extends LitElement {
}
async load_channels() {
let channels = await tfrpc.rpc.query(`
let channels = await tfrpc.rpc.query(
`
SELECT
content ->> 'channel' AS channel,
content ->> 'subscribed' AS subscribed
@ -82,7 +83,9 @@ class TfElement extends LitElement {
author = ? AND
content ->> 'type' = 'channel'
ORDER BY sequence
`, [this.whoami]);
`,
[this.whoami]
);
let channel_map = {};
for (let row of channels) {
if (row.subscribed) {
@ -243,7 +246,8 @@ class TfElement extends LitElement {
};
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
JOIN json_each(?1) AS channels ON messages.content ->> 'channel' = channels.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)
JOIN messages ON messages.rowid = messages_fts.rowid
JOIN json_each(?2) AS following ON messages.author = following.value
`, [
JSON.stringify(this.channels),
JSON.stringify(Object.keys(following)),
'"' + this.whoami.replace('"', '""') + '"',
]);
this.channels_unread = JSON.parse((await tfrpc.rpc.databaseGet('unread')) ?? '{}');
`,
[
JSON.stringify(this.channels),
JSON.stringify(Object.keys(following)),
'"' + this.whoami.replace('"', '""') + '"',
]
);
this.channels_unread = JSON.parse(
(await tfrpc.rpc.databaseGet('unread')) ?? '{}'
);
let start_time = new Date();
users = await this.fetch_about(Object.keys(following).sort(), users);
console.log(
@ -275,7 +283,9 @@ class TfElement extends LitElement {
start_time = new Date();
channels = await channels;
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.users = users;
console.log(`load finished ${whoami} => ${this.whoami}`);
@ -375,7 +385,10 @@ class TfElement extends LitElement {
};
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
class="w3-bar-item w3-button w3-circle w3-ripple"
@click=${this.refresh}
@ -415,8 +428,7 @@ class TfElement extends LitElement {
style="width: 100vw; min-height: 100vh; height: 100%"
class="w3-theme-dark"
>
${tabs}
${contents}
${tabs} ${contents}
</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"
style="box-sizing: border-box"
>
${this.channel !== undefined ?
html`<p>To #${this.channel}:</p>` :
undefined}
${this.channel !== undefined
? html`<p>To #${this.channel}:</p>`
: undefined}
${this.render_encrypt()}
<div class="w3-container w3-padding-small">
<div class="w3-half">

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

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

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

@ -192,24 +192,27 @@ class TfNewsElement extends LitElement {
<div>
${final_messages.map(
(x) =>
html`
${x.rowid == unread_rowid && x != final_messages[0] ?
html`<div style="display: flex; flex-direction: row">
<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="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"></div>
</div>` :
undefined}
<tf-message
.message=${x}
whoami=${this.whoami}
.users=${this.users}
.drafts=${this.drafts}
.expanded=${this.expanded}
collapsed="true"
channel=${this.channel}
channel_unread=${this.channel_unread}
></tf-message>`
html` ${x.rowid == unread_rowid && x != final_messages[0]
? html`<div style="display: flex; flex-direction: row">
<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="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"
></div>
</div>`
: undefined}
<tf-message
.message=${x}
whoami=${this.whoami}
.users=${this.users}
.drafts=${this.drafts}
.expanded=${this.expanded}
collapsed="true"
channel=${this.channel}
channel_unread=${this.channel_unread}
></tf-message>`
)}
</div>
`;

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

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

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

@ -110,9 +110,11 @@ class TfTabNewsElement extends LitElement {
}
unread_status(channel) {
if (this.channels_latest[channel] &&
if (
this.channels_latest[channel] &&
(this.channels_unread[channel] === undefined ||
this.channels_unread[channel] < this.channels_latest[channel])) {
this.channels_unread[channel] < this.channels_latest[channel])
) {
return '🔵';
}
}
@ -140,7 +142,7 @@ class TfTabNewsElement extends LitElement {
if (subscribed) {
this.channels = [].concat([channel], this.channels).sort();
} else {
this.channels = this.channels.filter(x => x != channel);
this.channels = this.channels.filter((x) => x != channel);
}
}
@ -149,14 +151,15 @@ class TfTabNewsElement extends LitElement {
}
render() {
let profile = this.hash.startsWith('#@') && this.hash != '#@'
? html`<tf-profile
class="tf-profile"
id=${this.hash.substring(1)}
whoami=${this.whoami}
.users=${this.users}
></tf-profile>`
: undefined;
let profile =
this.hash.startsWith('#@') && this.hash != '#@'
? html`<tf-profile
class="tf-profile"
id=${this.hash.substring(1)}
whoami=${this.whoami}
.users=${this.users}
></tf-profile>`
: undefined;
let edit_profile;
if (
!this.loading &&
@ -171,41 +174,82 @@ class TfTabNewsElement extends LitElement {
</div>`;
}
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 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>
<a href="#" class="w3-bar-item w3-button" style="font-weight: bold">${this.hash.substring(2)}</a>
` :
undefined}
<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
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>
<a
href="#"
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>
<a href="#" 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
href=${'#' + encodeURIComponent('#' + x)}
class="w3-bar-item w3-button"
style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a>
`)}
<a
href="#"
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
href=${'#' + encodeURIComponent('#' + x)}
class="w3-bar-item w3-button"
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
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>
<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}
>
<button class="w3-button w3-theme-d1" @click=${this.show_more}>
${this.new_messages_text()}
</button>
${this.hash.startsWith('##') ?
html`
<button 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>
` :
undefined}
${this.hash.startsWith('##')
? html`
<button
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>
`
: undefined}
</p>
<div class="w3-bar">
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!