From 71b0734688558eb0ab0c809eda1d68db6d827353 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 25 May 2026 12:45:20 +0000
Subject: [PATCH] appview/pages: improve notification styles

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/templates/notifications/list.html | 2 +-
 appview/pages/templates/notifications/fragments/item.html | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------
 2 file(s) changed, 74 insertion(s)(+), 57 deletion(s)(-)

diff --git a/appview/pages/templates/notifications/list.html b/appview/pages/templates/notifications/list.html
--- a/appview/pages/templates/notifications/list.html
+++ b/appview/pages/templates/notifications/list.html
@@ -12,7 +12,7 @@
   </div>
 
   {{if .Notifications}}
-    <div class="flex flex-col gap-2" id="notifications-list">
+    <div class="rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700" id="notifications-list">
       {{range .Notifications}}
         {{template "notifications/fragments/item" .}}
       {{end}}
diff --git a/appview/pages/templates/notifications/fragments/item.html b/appview/pages/templates/notifications/fragments/item.html
--- a/appview/pages/templates/notifications/fragments/item.html
+++ b/appview/pages/templates/notifications/fragments/item.html
@@ -2,74 +2,91 @@
   <a href="{{ template "notificationUrl" . }}" class="block no-underline hover:no-underline">
     <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-800/20 border border-blue-500 dark:border-sky-800{{end}}
-        flex gap-2 items-center
+        w-full mx-auto dark:text-white bg-white dark:bg-gray-800 px-2 md:px-6 py-4
+        grid grid-cols-[auto_1fr_auto] gap-x-3 gap-y-1 items-center
         ">
-      {{ template "notificationIcon" . }}
-      <div class="flex-1 w-full flex flex-col gap-1">
-        <div>
-          <span>{{ template "notificationHeader" . }}</span>
-          <span class="text-sm text-gray-500 dark:text-gray-400 before:content-['·'] before:select-none">{{ template "repo/fragments/shortTime" .Created }}</span>
-        </div>
-        <span class="text-sm text-gray-500 dark:text-gray-400">{{ template "notificationSummary" . }}</span>
+      {{/* row 1, col 1: icon */}}
+      <div class="row-start-1 {{ template "notificationIconColor" . }}">{{ i (.Icon) "size-4" }}</div>
+      {{/* row 1, col 2: header */}}
+      <div class="row-start-1 flex items-center gap-1.5 text-sm min-w-0 overflow-hidden">
+        {{- if not .Read }}
+          {{ template "repo/fragments/colorBall" (dict "color" "#1e40af" "classes" "shrink-0 dark:hidden") }}
+          {{ template "repo/fragments/colorBall" (dict "color" "#3b82f6" "classes" "shrink-0 hidden dark:block") }}
+        {{- end -}}
+        {{- template "notificationHeader" . -}}
       </div>
-
+      {{/* row 1, col 3: time */}}
+      <span class="row-start-1 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ template "repo/fragments/shortTime" .Created }}</span>
+      {{/* row 2, col 1: #N */}}
+      {{ template "notificationNumber" . }}
+      {{/* row 2, col 2: title */}}
+      {{ template "notificationSummary" . }}
     </div>
   </a>
 {{end}}
 
-{{ define "notificationIcon" }}
-  <div class="flex-shrink-0 max-h-full relative">
-    <img class="object-cover size-16 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-1 flex items-center justify-center z-10">
-      {{ i .Icon "size-3 text-black dark:text-white" }}
-    </div>
-  </div>
-{{ end }}
+{{ define "notificationIconColor" }}{{ if eq .Type "issue_created" }}text-green-600 dark:text-green-500{{ else if eq .Type "issue_reopen" }}text-green-600 dark:text-green-500{{ else if eq .Type "pull_created" }}text-green-600 dark:text-green-500{{ else if eq .Type "pull_reopen" }}text-green-600 dark:text-green-500{{ else if eq .Type "pull_merged" }}text-purple-600 dark:text-purple-500{{ else if eq .Type "pull_closed" }}text-red-600 dark:text-red-500{{ else }}text-gray-500 dark:text-gray-400{{ end }}{{ 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 "issue_reopen" }}
-    reopened 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 "pull_reopen" }}
-    reopened a pull request
-  {{ else if eq .Type "followed" }}
-    followed you
-  {{ else if eq .Type "user_mentioned" }}
-    mentioned you
-  {{ else }}
+{{ define "notificationNumber" }}
+  {{ if .Issue }}
+    <span class="row-start-2 col-start-1 text-sm text-gray-500 dark:text-gray-400 font-medium text-center">#{{ .Issue.IssueId }}</span>
+  {{ else if .Pull }}
+    <span class="row-start-2 col-start-1 text-sm text-gray-500 dark:text-gray-400 font-medium text-center">#{{ .Pull.PullId }}</span>
   {{ end }}
 {{ end }}
 
-{{ define "notificationSummary" }}
+{{ define "notificationHeader" }}
+  {{ $repoOwner := "" }}
+  {{ $repoName := "" }}
+  {{ if .Repo }}
+    {{ $repoOwner = resolve .Repo.Did }}
+    {{ $repoName = .Repo.Name }}
+  {{ end }}
+
+  {{ $textStyle := "text-gray-700 dark:text-gray-300" }}
+  {{ $subjectStyle := "text-gray-800 dark:text-gray-200" }}
+  {{ $repo := printf "%s/%s" $repoOwner $repoName }}
+  <span class="shrink-0 flex items-center gap-1">{{ template "user/fragments/picHandle" .ActorDid }}</span>
+  <span class="truncate">
   {{ 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}}
+    <span class="{{ $textStyle }}">starred</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "issue_created" }}
+    <span class="{{ $textStyle }}">opened an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "issue_commented" }}
+    <span class="{{ $textStyle }}">commented on an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "issue_closed" }}
+    <span class="{{ $textStyle }}">closed an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "issue_reopen" }}
+    <span class="{{ $textStyle }}">reopened an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "pull_created" }}
+    <span class="{{ $textStyle }}">created a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "pull_commented" }}
+    <span class="{{ $textStyle }}">commented on a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "pull_merged" }}
+    <span class="{{ $textStyle }}">merged a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "pull_closed" }}
+    <span class="{{ $textStyle }}">closed a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+  {{ else if eq .Type "pull_reopen" }}
+    <span class="{{ $textStyle }}">reopened a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
   {{ else if eq .Type "followed" }}
-    <!-- no summary -->
-  {{ else }}
+    <span class="{{ $textStyle }}">followed you</span>
+  {{ else if eq .Type "user_mentioned" }}
+    {{ if .Issue }}
+      <span class="{{ $textStyle }}">mentioned you on an issue in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+    {{ else if .Pull }}
+      <span class="{{ $textStyle }}">mentioned you on a pull request in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+    {{ else }}
+      <span class="{{ $textStyle }}">mentioned you in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
+    {{ end }}
+  {{ end }}
+  </span>
+{{ end }}
+
+{{ define "notificationSummary" }}
+  {{ if .Issue }}
+    <div class="row-start-2 col-start-2 text-sm text-gray-700 dark:text-gray-300 truncate">{{ .Issue.Title }}</div>
+  {{ else if .Pull }}
+    <div class="row-start-2 col-start-2 text-sm text-gray-700 dark:text-gray-300 truncate">{{ .Pull.Title }}</div>
   {{ end }}
 {{ end }}
 

--
tangled.sh