src/ts/pages/feed.ts · gabriel/musehub

style="background:none;border:1px solid var(--border-color);border-radius:50%;width:22px;height:22px;cursor:pointer;color:var(--text-muted);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-2)"

97

>✓</button>`

98

: '';

return `

${actorAvatar(item.actor)}

<span>${sentence}</span>

107

108

${window.escHtml(timestamp)}

${markReadBtn}

</span>

</div>

${isUnread ? '<div class="unread-dot" style="width:6px;height:6px;border-radius:50%;background:var(--color-accent);display:inline-block;margin-top:var(--space-1)"></div>' : ''}

</div>

</div>`;

}

// ── Mark-read helpers ─────────────────────────────────────────────────────────

118

119

function decrementNavBadge(): void {

120

const badge = document.getElementById('nav-notif-badge');

121

if (!badge) return;

122

const current = parseInt(badge.textContent ?? '', 10);

123

if (isNaN(current) || current <= 1) {

124

badge.style.display = 'none';

125

} else {

126

badge.textContent = String(current - 1);

}

}

async function markOneRead(btn: HTMLElement): Promise<void> {

131

const notifId = btn.dataset.notifId;

132

if (!notifId) return;

133

try {

134

await window.apiFetch('/notifications/' + encodeURIComponent(notifId) + '/read', { method: 'POST' });

135

const card = document.querySelector<HTMLElement>(`.comment-item[data-notif-id="${CSS.escape(notifId)}"]`);

136

if (card) {

137

card.style.borderLeft = '3px solid transparent';

138

card.style.opacity = '0.75';

139

card.querySelector('.unread-dot')?.remove();

}

btn.remove();

decrementNavBadge();

} catch (e) {

if ((e as Error).message !== 'auth') btn.style.color = 'var(--color-danger)';

}

}

async function markAllRead(): Promise<void> {

149

const markAllBtn = document.getElementById('mark-all-read-btn') as HTMLButtonElement | null;

150

if (markAllBtn) markAllBtn.disabled = true;

151

try {

152

await window.apiFetch('/notifications/read-all', { method: 'POST' });

153

document.querySelectorAll<HTMLElement>('.comment-item').forEach(card => {

154

card.style.borderLeft = '3px solid transparent';

155

card.style.opacity = '0.75';

156

card.querySelector('.unread-dot')?.remove();

157

card.querySelector('.mark-read-btn')?.remove();

158

});

159

const badge = document.getElementById('nav-notif-badge');

160

if (badge) badge.style.display = 'none';

161

markAllBtn?.remove();

162

} catch (e) {

163

if (markAllBtn) markAllBtn.disabled = false;

164

if ((e as Error).message !== 'auth') {

165

const err = document.getElementById('feed-error');

166

if (err) err.textContent = 'Could not mark all as read: ' + (e as Error).message;

}

}

}

// ── Event delegation ──────────────────────────────────────────────────────────

172

173

function bindActions(): void {

174

document.addEventListener('click', (e) => {

175

const el = (e.target as HTMLElement).closest<HTMLElement>('[data-action]');

176

if (!el) return;

177

if (el.dataset.action === 'mark-read') {

178

void markOneRead(el);

179

} else if (el.dataset.action === 'mark-all-read') {

void markAllRead();

}

});

}

// ── Main load ─────────────────────────────────────────────────────────────────

186

187

async function load(): Promise<void> {

188

const contentEl = document.getElementById('content');

189

if (!contentEl) return;

190

191

try {

192

const items = ((await window.apiFetch('/feed?limit=50')) ?? []) as FeedItem[];

193

194

if (items.length === 0) {

195

contentEl.innerHTML = `

196

197

198

<p class="empty-title">Your feed is empty</p>

199

<p class="empty-desc">Follow musicians and watch repos to see their activity here.</p>

200

<a href="/explore" class="btn btn-primary">Explore repos</a>

</div>`;

return;

}

const hasUnread = items.some(item => !item.is_read);

206

const markAllHtml = hasUnread

207

? `<button

208

id="mark-all-read-btn"

209

data-action="mark-all-read"

210

class="btn btn-secondary"

211

style="font-size:12px;padding:4px 10px"

212

>✓ Mark all as read</button>`

213

: '';

214

215

contentEl.innerHTML = `

216

217

<h1 style="margin:0">Activity Feed</h1>

${markAllHtml}

</div>

${items.map(eventCard).join('')}

223

</div>`;

224

} catch (e) {

225

if ((e as Error).message !== 'auth' && contentEl) {

226

contentEl.innerHTML = '<p class="error">✕ ' + window.escHtml((e as Error).message) + '</p>';

}

}

}

// ── Entry point ───────────────────────────────────────────────────────────────

232

233

export function initFeed(): void {

234

bindActions();

235

void load();

236

}