From 524a8dfa1e5e3c32b0c041232b6d8cc4c4467398 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 29 Sep 2025 16:54:31 +0100
Subject: [PATCH] appview/pages: improve notification styles
Change-Id: qwrnmrzwzunypnprpnlplozqksrkymxz

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/models/notifications.go               | 30 ++++++-
 .../notifications/fragments/item.html         | 78 +++++++++++++++----
 .../pages/templates/notifications/list.html   | 34 +++-----
 3 files changed, 103 insertions(+), 39 deletions(-)

diff --git a/appview/models/notifications.go b/appview/models/notifications.go
index bb467fc2..441f3df5 100644
--- a/appview/models/notifications.go
+++ b/appview/models/notifications.go
@@ -1,6 +1,8 @@
 package models
 
-import "time"
+import (
+	"time"
+)
 
 type NotificationType string
 
@@ -32,6 +34,32 @@ type Notification struct {
 	PullId  *int64
 }
 
+// lucide icon that represents this notification
+func (n *Notification) Icon() string {
+	switch n.Type {
+	case NotificationTypeRepoStarred:
+		return "star"
+	case NotificationTypeIssueCreated:
+		return "circle-dot"
+	case NotificationTypeIssueCommented:
+		return "message-square"
+	case NotificationTypeIssueClosed:
+		return "ban"
+	case NotificationTypePullCreated:
+		return "git-pull-request-create"
+	case NotificationTypePullCommented:
+		return "message-square"
+	case NotificationTypePullMerged:
+		return "git-merge"
+	case NotificationTypePullClosed:
+		return "git-pull-request-closed"
+	case NotificationTypeFollowed:
+		return "user-plus"
+	default:
+		return ""
+	}
+}
+
 type NotificationWithEntity struct {
 	*Notification
 	Repo  *Repo
diff --git a/appview/pages/templates/notifications/fragments/item.html b/appview/pages/templates/notifications/fragments/item.html
index 7d663703..708e2b3d 100644
--- a/appview/pages/templates/notifications/fragments/item.html
+++ b/appview/pages/templates/notifications/fragments/item.html
@@ -1,19 +1,69 @@
 {{define "notifications/fragments/item"}}
-<div class="border border-gray-200 dark:border-gray-700 rounded-sm p-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{if not .Read}}bg-blue-50 dark:bg-blue-900/20{{end}}">
-  {{if .Issue}}
-    {{template "issueNotification" .}}
-  {{else if .Pull}}
-    {{template "pullNotification" .}}
-  {{else if .Repo}}
-    {{template "repoNotification" .}}
-  {{else if eq .Type "followed"}}
-    {{template "followNotification" .}}
-  {{else}}
-    {{template "genericNotification" .}}
-  {{end}}
-</div>
+  <div 
+    class="
+      w-full mx-auto rounded drop-shadow-sm dark:text-white bg-white dark:bg-gray-800 px-2 md:px-6 py-4 transition-colors 
+      {{if not .Read}}bg-blue-50 dark:bg-blue-900/20 border border-blue-500 dark:border-sky-800{{end}}
+      flex gap-2 items-center
+      "
+    >
+
+    {{ template "notificationIcon" . }}
+    <div class="flex-1 w-full flex flex-col gap-1">
+      <span>{{ template "notificationHeader" . }}</span>
+      <span class="text-sm text-gray-500 dark:text-gray-400">{{ template "notificationSummary" . }}</span>
+    </div>
+
+  </div>
 {{end}}
 
+{{ define "notificationIcon" }}
+  <div class="flex-shrink-0 max-h-full w-16 h-16 relative">
+    <img class="object-cover rounded-full p-2" src="{{ fullAvatar .ActorDid }}" />
+    <div class="absolute border-2 border-white dark:border-gray-800 bg-gray-200 dark:bg-gray-700 bottom-1 right-1 rounded-full p-2 flex items-center justify-center z-10">
+      {{ i .Icon "size-3 text-black dark:text-white" }}
+    </div>
+  </div>
+{{ end }}
+
+{{ define "notificationHeader" }}
+  {{ $actor := resolve .ActorDid }}
+
+  <span class="text-black dark:text-white w-fit">{{ $actor }}</span>
+  {{ if eq .Type "repo_starred" }}
+    starred <span class="text-black dark:text-white">{{ resolve .Repo.Did }}/{{ .Repo.Name }}</span>
+  {{ else if eq .Type "issue_created" }}
+    opened an issue
+  {{ else if eq .Type "issue_commented" }}
+    commented on an issue
+  {{ else if eq .Type "issue_closed" }}
+    closed an issue
+  {{ else if eq .Type "pull_created" }}
+    created a pull request
+  {{ else if eq .Type "pull_commented" }}
+    commented on a pull request
+  {{ else if eq .Type "pull_merged" }}
+    merged a pull request
+  {{ else if eq .Type "pull_closed" }}
+    closed a pull request
+  {{ else if eq .Type "followed" }}
+    followed you
+  {{ else }}
+  {{ end }}
+{{ end }}
+
+{{ define "notificationSummary" }}
+  {{ if eq .Type "repo_starred" }}
+    <!-- no summary -->
+  {{ else if .Issue }}
+    #{{.Issue.IssueId}} {{.Issue.Title}} on {{resolve .Repo.Did}}/{{.Repo.Name}}
+  {{ else if .Pull }}
+    #{{.Pull.PullId}} {{.Pull.Title}} on {{resolve .Repo.Did}}/{{.Repo.Name}}
+  {{ else if eq .Type "followed" }}
+    <!-- no summary -->
+  {{ else }}
+  {{ end }}
+{{ end }}
+
 {{define "issueNotification"}}
 {{$url := printf "/%s/%s/issues/%d" (resolve .Repo.Did) .Repo.Name .Issue.IssueId}}
 <a
@@ -37,7 +87,7 @@
             {{ i "ban" "w-4 h-4" }}
           </span>
         {{end}}
-        {{template "user/fragments/picHandle" (resolve .ActorDid)}}
+        {{template "user/fragments/picHandle" .ActorDid}}
         {{if eq .Type "issue_created"}}
           <span class="text-gray-500 dark:text-gray-400">opened issue</span>
         {{else if eq .Type "issue_commented"}}
diff --git a/appview/pages/templates/notifications/list.html b/appview/pages/templates/notifications/list.html
index 7362e6db..e44177ea 100644
--- a/appview/pages/templates/notifications/list.html
+++ b/appview/pages/templates/notifications/list.html
@@ -1,8 +1,8 @@
 {{ define "title" }}notifications{{ end }}
 
 {{ define "content" }}
-  <div class="p-6">
-    <div class="flex items-center justify-between mb-4">
+  <div class="px-6 py-4">
+    <div class="flex items-center justify-between">
       <p class="text-xl font-bold dark:text-white">Notifications</p>
       <a href="/settings/notifications" class="flex items-center gap-2">
         {{ i "settings" "w-4 h-4" }}
@@ -11,36 +11,22 @@
     </div>
   </div>
 
-  <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
     {{if .Notifications}}
-      <div class="flex flex-col gap-4" id="notifications-list">
+      <div class="flex flex-col gap-2" id="notifications-list">
         {{range .Notifications}}
           {{template "notifications/fragments/item" .}}
         {{end}}
       </div>
 
-      {{if .HasMore}}
-        <div class="mt-6 text-center">
-          <button
-            class="btn gap-2 group"
-            hx-get="/notifications?offset={{.NextOffset}}&limit={{.Limit}}"
-            hx-target="#notifications-list"
-            hx-swap="beforeend"
-          >
-            {{ i "chevron-down" "w-4 h-4 group-[.htmx-request]:hidden" }}
-            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-            Load more
-          </button>
-        </div>
-      {{end}}
     {{else}}
-      <div class="text-center py-12">
-        <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
-          {{ i "bell-off" "w-16 h-16" }}
+      <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
+        <div class="text-center py-12">
+          <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
+            {{ i "bell-off" "w-16 h-16" }}
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
+          <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
         </div>
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
-        <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
       </div>
     {{end}}
-  </div>
 {{ end }}
-- 
2.43.0