bobbydigitales/dandelion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add notification nav, show only replies in short format

Browse Source
This commit is contained in:
bobbydigitales
2026-04-17 00:29:51 -07:00
parent 1353acc4d1
commit e27cf391ef
10 changed files with 245 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
static/App.js
View File

@@ -1,7 +1,7 @@
import { generateID } from "IDUtils";
import { PeerManager, PeerEventTypes } from "PeerManager";
import { Sync } from "Sync";
import { openDatabase, getData, addData, deleteData, mergeDataArray, getAllData, getPostForUser, getPostById, getRepliesForPost, buildReplyCountMap } from "db";
import { openDatabase, getData, addData, deleteData, mergeDataArray, getAllData, getPostForUser, getPostById, getRepliesForPost, buildReplyCountMap, getNotificationsForUser } from "db";
import { arrayBufferToBase64, compressString, decompressBuffer, base64ToArrayBuffer } from "dataUtils";
import { log, logID, renderLog, setLogVisibility } from "log";
class Post {
@@ -694,6 +694,14 @@ export class App {
correctLevel: QRCode.CorrectLevel.H
});
}
hideInfo() {
const infoElement = document.getElementById('info');
if (infoElement && infoElement.style.display !== 'none') {
infoElement.style.display = 'none';
setLogVisibility(false);
this.showLog = false;
}
}
showInfo() {
let infoElement = document.getElementById('info');
if (infoElement === null) {
@@ -730,6 +738,14 @@ export class App {
homeButton.addEventListener('click', e => globalThis.location.href = `${globalThis.location.origin}/`);
let profileButton = this.div('profile-button');
profileButton.addEventListener('click', e => globalThis.location.href = `${globalThis.location.origin}/user/${this.userID}`);
let notificationsButton = this.div('notifications-button');
notificationsButton.addEventListener('click', () => {
this.hideInfo();
navContainer.classList.remove('active');
history.pushState({}, '', '/notifications');
this.getRoute();
this.render();
});
let monitorButton = this.div('monitor_button');
monitorButton.addEventListener('click', async () => {
navContainer.classList.toggle('active');
@@ -975,7 +991,7 @@ export class App {
this.sync.setArchive(this.isArchivePeer);
this.connect();
await this.initDB();
window.addEventListener('popstate', () => { this.getRoute(); this.render(); });
window.addEventListener('popstate', () => { this.hideInfo(); this.getRoute(); this.render(); });
this.connectURL = `${document.location.origin}/connect/${this.userID}`;
document.getElementById('connectURL').innerHTML = `<a href="${this.connectURL}">connect</a>`;
let time = 0;
@@ -1076,6 +1092,11 @@ export class App {
compose.style.display = "none";
break;
}
case App.Route.NOTIFICATIONS: {
this.posts = await getNotificationsForUser(this.userID);
document.getElementById('compose').style.display = "none";
break;
}
default: {
console.log.apply(null, log("Render: got a route I didn't understand. Rendering HOME:", this.router.route));
this.posts = await this.loadPostsFromStorage(this.userID) ?? [];
@@ -1086,6 +1107,20 @@ export class App {
if (!contentDiv) {
throw new Error();
}
if (this.router.route === App.Route.NOTIFICATIONS) {
contentDiv.innerHTML = '';
if (this.posts.length === 0) {
contentDiv.innerHTML = '<div style="padding:20px;color:gray">No notifications yet.</div>';
}
else {
let first = true;
for (const postRecord of this.posts) {
contentDiv.appendChild(this.renderNotificationItem(postRecord.data, first));
first = false;
}
}
return;
}
if (this.posts.length === 0) {
this.renderWelcome(contentDiv);
return;
@@ -1203,6 +1238,36 @@ export class App {
}
composeReplyArea.appendChild(previewDiv);
}
renderNotificationItem(post, first) {
const el = document.createElement('div');
el.style.cssText = 'padding: 8px 10px; cursor: pointer;';
if (!first)
el.innerHTML = '<hr>';
const authorDiv = document.createElement('div');
authorDiv.className = 'compose-reply-author';
authorDiv.textContent = `@${post.author} · ${post.post_timestamp.toLocaleDateString()}`;
el.appendChild(authorDiv);
const previewDiv = document.createElement('div');
previewDiv.className = 'compose-reply-preview';
const textDiv = document.createElement('div');
textDiv.className = 'compose-reply-preview-text';
textDiv.style.maxHeight = 'none';
textDiv.innerHTML = this.markedAvailable ? marked.parse(post.text) : post.text;
previewDiv.appendChild(textDiv);
if (post.image_data) {
const img = document.createElement('img');
img.className = 'compose-reply-preview-image';
img.src = URL.createObjectURL(new Blob([post.image_data]));
previewDiv.appendChild(img);
}
el.appendChild(previewDiv);
el.addEventListener('click', () => {
history.pushState({}, '', `/user/${post.author_id}/post/${post.post_id}`);
this.getRoute();
this.render();
});
return el;
}
renderPost(post, first, replyCount = 0) {
if (!(post.hasOwnProperty("text"))) {
throw new Error("Post is malformed!");
@@ -1296,6 +1361,14 @@ export class App {
getRoute() {
let path = document.location.pathname;
console.log.apply(null, log("router: path ", path));
if (path === '/notifications') {
this.router.route = App.Route.NOTIFICATIONS;
this.router.userID = '';
this.router.postID = '';
this.router.mediaID = '';
console.log.apply(null, log("router: NOTIFICATIONS"));
return;
}
const regex = "(user/([a-zA-Z0-9\-]+)/?(post/([a-zA-Z0-9\-]+)?/?)?(media/([0-9]+)?)?)|(connect/([a-zA-Z0-9\-]+))";
const match = path.match(new RegExp(regex));
if (match) {
@@ -1342,6 +1415,7 @@ export class App {
Route[Route["GROUP"] = 8] = "GROUP";
Route[Route["HOME"] = 16] = "HOME";
Route[Route["CONNECT"] = 32] = "CONNECT";
Route[Route["NOTIFICATIONS"] = 64] = "NOTIFICATIONS";
})(Route = App.Route || (App.Route = {}));
})(App || (App = {}));
;

2
static/App.js.map
View File

File diff suppressed because one or more lines are too long

25
static/db.js
View File

@@ -433,6 +433,31 @@ export async function getRepliesForPost(postID) {
}
return replies;
}
export async function getNotificationsForUser(userID) {
const userPostIds = new Set(await getAllIds(userID));
const knownUsers = [...(await indexedDB.databases())]
.map(db => db.name?.replace('user_', '')).filter(Boolean);
let notifications = [];
for (const dbUserID of knownUsers) {
try {
const { store } = await getDBTransactionStore(dbUserID);
const index = store.index("postReplyIndex");
const results = await new Promise((resolve, reject) => {
const req = index.getAll();
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
for (const r of results) {
if (r.data.reply_to_id && userPostIds.has(r.data.reply_to_id)) {
notifications.push(r);
}
}
}
catch (_) { }
}
notifications.sort((a, b) => new Date(b.data.post_timestamp).getTime() - new Date(a.data.post_timestamp).getTime());
return notifications;
}
export async function getPostsByIds(userID, postIDs) {
const { store } = await getDBTransactionStore(userID);
const index = store.index("postIDIndex");

2
static/db.js.map
View File

File diff suppressed because one or more lines are too long

4
static/index.html
View File

@@ -58,6 +58,10 @@
<span class="nav-emoji emoji-fill" role="img" aria-label="Home">🏠</span>
<span class="nav-label">Home</span>
</a>
<a class="nav-item" id="notifications-button">
<span class="nav-emoji emoji-fill" role="img" aria-label="Notifications">🔔</span>
<span class="nav-label">Notifications</span>
</a>
<!-- <a class="nav-item">
<span class="nav-emoji" role="img" aria-label="Search">🔍</span>
<span class="nav-label">Search</span>

3
static/main.css
View File

@@ -392,6 +392,7 @@ iframe {
max-width: 96px;
max-height: 96px;
object-fit: cover;
object-position: top;
border-radius: 4px;
flex-shrink: 0;
}
@@ -418,7 +419,7 @@ iframe {
/* border-right: 1px solid rgb(60, 60, 60); */
/* transition: width 0.3s; */
overflow: hidden;
width: 130px;
width: 185px;
margin-right: 5px;
}