+ {{$statusUnread := 1}}{{$statusRead := 2}}{{$statusPinned := 3}}
{{$notificationUnreadCount := call .PageGlobalData.GetNotificationUnreadCount}}
-
+ {{$pageTypeIsRead := eq $.PageType "read"}}
+
- {{if and (eq .Status 1)}}
+ {{if and (not $pageTypeIsRead) $notificationUnreadCount}}
{{end}}
-
-
- {{if not .Notifications}}
- ('.notifications-unread-count');
- let unreadCount = parseInt(unreadCountEl.textContent);
- for (const item of table.querySelectorAll('.notifications-item[data-remove="true"]')) {
- item.remove();
- unreadCount -= 1;
- }
- unreadCountEl.textContent = String(unreadCount);
- }
- });
-
- // mark clicked unread links for deletion on bfcache restore
- for (const link of table.querySelectorAll('.notifications-item[data-status="1"] .notifications-link')) {
- link.addEventListener('click', (e: DOMEvent) => {
- e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
- });
- }
-}
-
-async function receiveUpdateCount(event: MessageEvent) {
+async function receiveUpdateCount(event: MessageEvent<{type: string, data: string}>) {
try {
- const data = JSON.parse(event.data);
-
+ const data = JSON.parse(event.data.data);
for (const count of document.querySelectorAll('.notification_count')) {
count.classList.toggle('tw-hidden', data.Count === 0);
count.textContent = `${data.Count}`;
@@ -71,7 +44,7 @@ export function initNotificationCount() {
type: 'start',
url: `${window.location.origin}${appSubUrl}/user/events`,
});
- worker.port.addEventListener('message', (event: MessageEvent) => {
+ worker.port.addEventListener('message', (event: MessageEvent<{type: string, data: string}>) => {
if (!event.data || !event.data.type) {
console.error('unknown worker message event', event);
return;
@@ -144,11 +117,11 @@ async function updateNotificationCountWithCallback(callback: (timeout: number, n
}
async function updateNotificationTable() {
- const notificationDiv = document.querySelector('#notification_div');
+ let notificationDiv = document.querySelector('#notification_div');
if (notificationDiv) {
try {
const params = new URLSearchParams(window.location.search);
- params.set('div-only', String(true));
+ params.set('div-only', 'true');
params.set('sequence-number', String(++notificationSequenceNumber));
const response = await GET(`${appSubUrl}/notifications?${params.toString()}`);
@@ -160,7 +133,8 @@ async function updateNotificationTable() {
const el = createElementFromHTML(data);
if (parseInt(el.getAttribute('data-sequence-number')) === notificationSequenceNumber) {
notificationDiv.outerHTML = data;
- initNotificationsTable();
+ notificationDiv = document.querySelector('#notification_div');
+ window.htmx.process(notificationDiv); // when using htmx, we must always remember to process the new content changed by us
}
} catch (error) {
console.error(error);
diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts
index ca18d1e828..770c7fc00c 100644
--- a/web_src/js/index-domready.ts
+++ b/web_src/js/index-domready.ts
@@ -15,7 +15,7 @@ import {initTableSort} from './features/tablesort.ts';
import {initAdminUserListSearchForm} from './features/admin/users.ts';
import {initAdminConfigs} from './features/admin/config.ts';
import {initMarkupAnchors} from './markup/anchors.ts';
-import {initNotificationCount, initNotificationsTable} from './features/notification.ts';
+import {initNotificationCount} from './features/notification.ts';
import {initRepoIssueContentHistory} from './features/repo-issue-content.ts';
import {initStopwatch} from './features/stopwatch.ts';
import {initFindFileInRepo} from './features/repo-findfile.ts';
@@ -117,7 +117,6 @@ const initPerformanceTracer = callInitFunctions([
initDashboardRepoList,
initNotificationCount,
- initNotificationsTable,
initOrgTeam,
- {{svg "octicon-inbox" 56 "tw-mb-4"}}
- {{if eq .Status 1}}
- {{ctx.Locale.Tr "notification.no_unread"}}
+
diff --git a/web_src/css/user.css b/web_src/css/user.css
index caabf1834c..d42e8688fb 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -114,6 +114,14 @@
border-radius: var(--border-radius);
}
+.notifications-item {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5em;
+ padding: 0.5em 1em;
+}
+
.notifications-item:hover {
background: var(--color-hover);
}
@@ -129,6 +137,9 @@
.notifications-item:hover .notifications-buttons {
display: flex;
+ align-items: center;
+ justify-content: end;
+ gap: 0.25em;
}
.notifications-item:hover .notifications-updated {
diff --git a/web_src/js/features/notification.ts b/web_src/js/features/notification.ts
index dc0acb0244..4a1aa3ede9 100644
--- a/web_src/js/features/notification.ts
+++ b/web_src/js/features/notification.ts
@@ -1,40 +1,13 @@
import {GET} from '../modules/fetch.ts';
-import {toggleElem, type DOMEvent, createElementFromHTML} from '../utils/dom.ts';
+import {toggleElem, createElementFromHTML} from '../utils/dom.ts';
import {logoutFromWorker} from '../modules/worker.ts';
const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
let notificationSequenceNumber = 0;
-export function initNotificationsTable() {
- const table = document.querySelector('#notification_table');
- if (!table) return;
-
- // when page restores from bfcache, delete previously clicked items
- window.addEventListener('pageshow', (e) => {
- if (e.persisted) { // page was restored from bfcache
- const table = document.querySelector('#notification_table');
- const unreadCountEl = document.querySelector
+ {{range $one := .Notifications}}
+
{{template "base/paginate" .}}
+
+ {{end}}
+ {{if $one.Issue}}
+ {{template "shared/issueicon" $one.Issue}}
{{else}}
- {{ctx.Locale.Tr "notification.no_read"}}
+ {{svg "octicon-repo" 16 "text grey"}}
{{end}}
- {{else}}
- {{range $notification := .Notifications}}
-
-
-
-
+ {{else}}
+
- {{.Repository.FullName}} {{if .Issue}}#{{.Issue.Index}}{{end}}
- {{if eq .Status 3}}
- {{svg "octicon-pin" 13 "text blue tw-mt-0.5 tw-ml-1"}}
- {{end}}
-
-
-
- {{if .Issue}}
- {{.Issue.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}
- {{else}}
- {{.Repository.FullName}}
- {{end}}
-
-
-
-
- {{if .Issue}}
- {{DateUtils.TimeSince .Issue.UpdatedUnix}}
- {{else}}
- {{DateUtils.TimeSince .UpdatedUnix}}
- {{end}}
-
-
+
+
+ {{$one.Repository.FullName}} {{if $one.Issue}}#{{$one.Issue.Index}}{{end}}
+ {{if eq $one.Status $statusPinned}}
+ {{svg "octicon-pin" 13 "text blue"}}
+ {{end}}
+
+ {{if $one.Issue}}
+ {{$one.Issue.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}
+ {{else}}
+ {{$one.Repository.FullName}}
+ {{end}}
+
+
+
+ {{if $one.Issue}}
+ {{DateUtils.TimeSince $one.Issue.UpdatedUnix}}
+ {{else}}
+ {{DateUtils.TimeSince $one.UpdatedUnix}}
+ {{end}}
+
+
+
+ {{svg "octicon-inbox" 56 "tw-mb-4"}}
+ {{if $pageTypeIsRead}}
+ {{ctx.Locale.Tr "notification.no_read"}}
+ {{else}}
+ {{ctx.Locale.Tr "notification.no_unread"}}
{{end}}
- {{end}}
-
+