From 6c83413ada46fd7a7bb898ef88ee7f33d28cc859 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 25 May 2026 13:44:02 +0000
Subject: [PATCH] appview/notifications: implement popover based notification tray

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/notifications/notifications.go | 25 +++++++++++++++++++++++++
 appview/pages/pages.go | 9 +++++++++
 appview/pages/templates/notifications/fragments/bell.html | 44 +++++++++++++++++++++++++++++++++++++++-----
 appview/pages/templates/notifications/fragments/preview.html | 19 +++++++++++++++++++
 4 file(s) changed, 92 insertion(s)(+), 5 deletion(s)(-)

diff --git a/appview/notifications/notifications.go b/appview/notifications/notifications.go
--- a/appview/notifications/notifications.go
+++ b/appview/notifications/notifications.go
@@ -38,6 +38,7 @@
 	r.Group(func(r chi.Router) {
 		r.Use(middleware.AuthMiddleware(n.oauth))
 		r.With(middleware.Paginate).Get("/", n.notificationsPage)
+		r.Get("/preview", n.previewHandler)
 		r.Post("/{id}/read", n.markRead)
 		r.Post("/read-all", n.markAllRead)
 		r.Delete("/{id}", n.deleteNotification)
@@ -87,6 +88,30 @@
 		Page:          page,
 		Total:         total,
 	})
+}
+
+func (n *Notifications) previewHandler(w http.ResponseWriter, r *http.Request) {
+	l := n.logger.With("handler", "previewHandler")
+	user := n.oauth.GetMultiAccountUser(r)
+
+	notifications, err := db.GetNotificationsWithEntities(
+		n.db,
+		pagination.Page{Limit: 5, Offset: 0},
+		orm.FilterEq("recipient_did", user.Did),
+	)
+	if err != nil {
+		l.Error("failed to get notifications", "err", err)
+		n.pages.Error500(w)
+		return
+	}
+
+	err = n.pages.NotificationPreview(w, pages.NotificationPreviewParams{
+		LoggedInUser:  user,
+		Notifications: notifications,
+	})
+	if err != nil {
+		l.Error("failed to render notification preview", "err", err)
+	}
 }
 
 func (n *Notifications) getUnreadCount(w http.ResponseWriter, r *http.Request) {
diff --git a/appview/pages/pages.go b/appview/pages/pages.go
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -473,6 +473,15 @@
 	return p.executePlain("notifications/fragments/count", w, params)
 }
 
+type NotificationPreviewParams struct {
+	LoggedInUser  *oauth.MultiAccountUser
+	Notifications []*models.NotificationWithEntity
+}
+
+func (p *Pages) NotificationPreview(w io.Writer, params NotificationPreviewParams) error {
+	return p.executePlain("notifications/fragments/preview", w, params)
+}
+
 type UserKeysSettingsParams struct {
 	LoggedInUser *oauth.MultiAccountUser
 	PubKeys      []models.PublicKey
diff --git a/appview/pages/templates/notifications/fragments/bell.html b/appview/pages/templates/notifications/fragments/bell.html
--- a/appview/pages/templates/notifications/fragments/bell.html
+++ b/appview/pages/templates/notifications/fragments/bell.html
@@ -1,11 +1,45 @@
 {{define "notifications/fragments/bell"}}
-<div class="relative"
+<style>
+  #notif-bell-btn {
+    anchor-name: --notif-bell;
+  }
+  #notif-popup {
+    position-anchor: --notif-bell;
+    position-area: bottom span-left;
+  }
+</style>
+  {{/* mobile - lnik to notifications page */}}
+  <a href="/notifications"
+     class="md:hidden relative text-gray-500 dark:text-gray-400 flex gap-1 items-end"
      hx-get="/notifications/count"
-     hx-target="#notification-count"
+     hx-target="#notification-count-mobile"
      hx-trigger="load, every 30s">
-  <a href="/notifications" class="text-gray-500 dark:text-gray-400 flex gap-1 items-end group">
     {{ i "bell" "size-5" }}
-    <span id="notification-count"></span>
+    <span id="notification-count-mobile"></span>
   </a>
-</div>
+
+  {{/* desktop popover button */}}
+  <button
+    id="notif-bell-btn"
+    popovertarget="notif-popup"
+    popovertargetaction="toggle"
+    class="hidden md:flex relative text-gray-500 dark:text-gray-400 gap-1 items-end cursor-pointer"
+    hx-get="/notifications/count"
+    hx-target="#notification-count-desktop"
+    hx-trigger="load, every 30s">
+    {{ i "bell" "size-5" }}
+    <span id="notification-count-desktop"></span>
+  </button>
+
+  <div
+    popover
+    id="notif-popup"
+    hx-get="/notifications/preview?read=unread"
+    hx-trigger="toggle[newState=='open'] once"
+    hx-swap="innerHTML"
+    class="mt-1 w-[36rem] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded drop-shadow-lg dark:text-white p-0 overflow-hidden">
+    <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500">
+      {{ i "loader-circle" "size-4 animate-spin mx-auto" }}
+    </div>
+  </div>
 {{end}}
diff --git a/appview/pages/templates/notifications/fragments/preview.html b/appview/pages/templates/notifications/fragments/preview.html
new file mode 100644
--- /dev/null
+++ b/appview/pages/templates/notifications/fragments/preview.html
@@ -0,0 +1,19 @@
+{{ define "notifications/fragments/preview" }}
+  {{ if .Notifications }}
+    <div class="divide-y divide-gray-200 dark:divide-gray-700 bg-slate-100 dark:bg-gray-900">
+      {{ range .Notifications }}
+        {{ template "notifications/fragments/item" . }}
+      {{ end }}
+    </div>
+  {{ else }}
+    <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500">
+      No notifications
+    </div>
+  {{ end }}
+  <div class="flex items-center justify-end px-4 py-2 border-t border-gray-200 dark:border-gray-700 text-sm">
+    <a href="/notifications" 
+       class="flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-300 no-underline hover:no-underline">
+      view all {{ i "arrow-right" "size-4" }}
+    </a>
+  </div>
+{{ end }}

--
tangled.sh