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

ssb: Merge in the new very work in progress channels interface.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 16m1s
Details

Browse Source
This commit is contained in:
Cory McWilliams
2024-11-30 15:05:14 -05:00
parent 53044696ba
commit cd2c2587ae
6 changed files with 319 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,9 @@ class TfTabNewsElement extends LitElement {
drafts: {type: Object},
expanded: {type: Object},
loading: {type: Boolean},
channels: {type: Array},
channels_unread: {type: Object},
channels_latest: {type: Object},
};
}
@ -29,6 +32,9 @@ class TfTabNewsElement extends LitElement {
this.cache = {};
this.drafts = {};
this.expanded = {};
this.channels_unread = {};
this.channels_latest = {};
this.channels = [];
tfrpc.rpc.localStorageGet('drafts').then(function (d) {
self.drafts = JSON.parse(d || '{}');
});
@ -106,6 +112,47 @@ class TfTabNewsElement extends LitElement {
}
}
unread_status(channel) {
if (this.channels_latest[channel] &&
(this.channels_unread[channel] === undefined ||
this.channels_unread[channel] < this.channels_latest[channel])) {
return '🔵';
}
}
show_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'block';
this.renderRoot.getElementById('main').style.marginLeft = '2in';
this.renderRoot.getElementById('show_sidebar').style.display = 'none';
}
hide_sidebar() {
this.renderRoot.getElementById('sidebar').style.display = 'none';
this.renderRoot.getElementById('main').style.marginLeft = '0';
this.renderRoot.getElementById('show_sidebar').style.display = 'block';
}
async channel_toggle_subscribed() {
let channel = this.hash.substring(2);
let subscribed = this.channels.indexOf(channel) != -1;
subscribed = !subscribed;
await tfrpc.rpc.appendMessage(this.whoami, {
type: 'channel',
channel: channel,
subscribed: subscribed,
});
if (subscribed) {
this.channels = [].concat([channel], this.channels).sort();
} else {
this.channels = this.channels.filter(x => x != channel);
}
}
channel() {
return this.hash.startsWith('##') ? this.hash.substring(2) : undefined;
}
render() {
let profile = this.hash.startsWith('#@')
? html`<tf-profile
@ -129,39 +176,68 @@ class TfTabNewsElement extends LitElement {
</div>`;
}
return html`
<p class="w3-bar">
<button
class="w3-bar-item w3-button w3-theme-d1"
@click=${this.show_more}
>
${this.new_messages_text()}
</button>
</p>
<div class="w3-bar">
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
${edit_profile}
<div class="w3-sidebar w3-bar-block w3-theme-d1" style="width: 2in; left: 0" id="sidebar">
<div class="w3-right w3-button" @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>
${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>
<tf-compose
id="tf-compose"
<div style="margin-left: 2in; padding: 8px" id="main">
<div id="show_sidebar" class="w3-left w3-button" style="display: none" @click=${this.show_sidebar}>&#9776;</div>
<p>
<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}
</p>
<div class="w3-bar">
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
${edit_profile}
</div>
<div>
<tf-compose
id="tf-compose"
whoami=${this.whoami}
.users=${this.users}
.drafts=${this.drafts}
@tf-draft=${this.draft}
.channel=${this.channel()}
></tf-compose>
</div>
${profile}
<tf-tab-news-feed
id="news"
whoami=${this.whoami}
.users=${this.users}
.following=${this.following}
hash=${this.hash}
.drafts=${this.drafts}
.expanded=${this.expanded}
@tf-draft=${this.draft}
></tf-compose>
@tf-expand=${this.on_expand}
.channels_unread=${this.channels_unread}
></tf-tab-news-feed>
</div>
${profile}
<tf-tab-news-feed
id="news"
whoami=${this.whoami}
.users=${this.users}
.following=${this.following}
hash=${this.hash}
.drafts=${this.drafts}
.expanded=${this.expanded}
@tf-draft=${this.draft}
@tf-expand=${this.on_expand}
></tf-tab-news-feed>
`;
}
}