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

ssb: Working toward a more sensible unread indication and user interface for setting read/unread.

Browse Source
This commit is contained in:
Cory McWilliams 2024-12-01 12:56:31 -05:00
parent ba7d1ad35f
commit effb354d1b
4 changed files with 24 additions and 6 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", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&NniJybtFHDaypdljDj1kbGIpwU8T5lX9m7+bA1YTu+M=.sha256" "previous": "&Hnfvxu/+f8Z3qbbn/6M5+E7ju/Cj6fxg7SEBwlTy23g=.sha256"
} }

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

@ -323,13 +323,13 @@ ${JSON.stringify(mention, null, 2)}</pre
} }
} }
mark_read() { 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 + 1, unread: this.message.rowid,
}, },
})); }));
} }
@ -640,9 +640,9 @@ ${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 ? ${(!content.root && this.message.rowid <= this.channel_unread) ?
html` html`
<button class="w3-button w3-theme-d1" @click=${this.mark_read}>Set Read Here</button> <button class="w3-button w3-theme-d1" @click=${this.mark_unread}>Mark Unread</button>
` : ` :
undefined} undefined}
</p> </p>

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

@ -181,11 +181,28 @@ class TfNewsElement extends LitElement {
let final_messages = this.group_following( let final_messages = this.group_following(
this.finalize_messages(messages_by_id) this.finalize_messages(messages_by_id)
); );
let unread_rowid = -1;
for (let message of final_messages) {
if (message.rowid < this.channel_unread) {
console.log(message.rowid, this.channel_unread);
unread_rowid = message.rowid;
break;
}
}
console.log(unread_rowid);
return html` return html`
<div> <div>
${final_messages.map( ${final_messages.map(
(x) => (x) =>
html`<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} .message=${x}
whoami=${this.whoami} whoami=${this.whoami}
.users=${this.users} .users=${this.users}

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

@ -267,6 +267,7 @@ class TfTabNewsFeedElement extends LitElement {
`; `;
} }
return html` return html`
<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}