Monorepo for Tangled
appview/pages: improve notification styles
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
Lewis
(May 29, 2026, 2:50 PM +0300)
71b07346
7cf58345
+59
-42
+58
-41
appview/pages/templates/notifications/fragments/item.html
+58
-41
appview/pages/templates/notifications/fragments/item.html
···
2
2
<a href="{{ template "notificationUrl" . }}" class="block no-underline hover:no-underline">
3
3
<div
4
4
class="
5
-
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
6
-
{{if not .Read}}bg-blue-50 dark:bg-blue-800/20 border border-blue-500 dark:border-sky-800{{end}}
7
-
flex gap-2 items-center
5
+
w-full mx-auto dark:text-white bg-white dark:bg-gray-800 px-2 md:px-6 py-4
6
+
grid grid-cols-[auto_1fr_auto] gap-x-3 gap-y-1 items-center
8
7
">
9
-
{{ template "notificationIcon" . }}
10
-
<div class="flex-1 w-full flex flex-col gap-1">
11
-
<div>
12
-
<span>{{ template "notificationHeader" . }}</span>
13
-
<span class="text-sm text-gray-500 dark:text-gray-400 before:content-['·'] before:select-none">{{ template "repo/fragments/shortTime" .Created }}</span>
14
-
</div>
15
-
<span class="text-sm text-gray-500 dark:text-gray-400">{{ template "notificationSummary" . }}</span>
8
+
{{/* row 1, col 1: icon */}}
9
+
<div class="row-start-1 {{ template "notificationIconColor" . }}">{{ i (.Icon) "size-4" }}</div>
10
+
{{/* row 1, col 2: header */}}
11
+
<div class="row-start-1 flex items-center gap-1.5 text-sm min-w-0 overflow-hidden">
12
+
{{- if not .Read }}
13
+
{{ template "repo/fragments/colorBall" (dict "color" "#1e40af" "classes" "shrink-0 dark:hidden") }}
14
+
{{ template "repo/fragments/colorBall" (dict "color" "#3b82f6" "classes" "shrink-0 hidden dark:block") }}
15
+
{{- end -}}
16
+
{{- template "notificationHeader" . -}}
16
17
</div>
17
-
18
+
{{/* row 1, col 3: time */}}
19
+
<span class="row-start-1 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ template "repo/fragments/shortTime" .Created }}</span>
20
+
{{/* row 2, col 1: #N */}}
21
+
{{ template "notificationNumber" . }}
22
+
{{/* row 2, col 2: title */}}
23
+
{{ template "notificationSummary" . }}
18
24
</div>
19
25
</a>
20
26
{{end}}
21
27
22
-
{{ define "notificationIcon" }}
23
-
<div class="flex-shrink-0 max-h-full relative">
24
-
<img class="object-cover size-16 rounded-full p-2" src="{{ fullAvatar .ActorDid }}" />
25
-
<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">
26
-
{{ i .Icon "size-3 text-black dark:text-white" }}
27
-
</div>
28
-
</div>
28
+
{{ 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 }}
29
+
30
+
{{ define "notificationNumber" }}
31
+
{{ if .Issue }}
32
+
<span class="row-start-2 col-start-1 text-sm text-gray-500 dark:text-gray-400 font-medium text-center">#{{ .Issue.IssueId }}</span>
33
+
{{ else if .Pull }}
34
+
<span class="row-start-2 col-start-1 text-sm text-gray-500 dark:text-gray-400 font-medium text-center">#{{ .Pull.PullId }}</span>
35
+
{{ end }}
29
36
{{ end }}
30
37
31
38
{{ define "notificationHeader" }}
32
-
{{ $actor := resolve .ActorDid }}
39
+
{{ $repoOwner := "" }}
40
+
{{ $repoName := "" }}
41
+
{{ if .Repo }}
42
+
{{ $repoOwner = resolve .Repo.Did }}
43
+
{{ $repoName = .Repo.Name }}
44
+
{{ end }}
33
45
34
-
<span class="text-black dark:text-white w-fit">{{ $actor }}</span>
46
+
{{ $textStyle := "text-gray-700 dark:text-gray-300" }}
47
+
{{ $subjectStyle := "text-gray-800 dark:text-gray-200" }}
48
+
{{ $repo := printf "%s/%s" $repoOwner $repoName }}
49
+
<span class="shrink-0 flex items-center gap-1">{{ template "user/fragments/picHandle" .ActorDid }}</span>
50
+
<span class="truncate">
35
51
{{ if eq .Type "repo_starred" }}
36
-
starred <span class="text-black dark:text-white">{{ resolve .Repo.Did }}/{{ .Repo.Name }}</span>
52
+
<span class="{{ $textStyle }}">starred</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
37
53
{{ else if eq .Type "issue_created" }}
38
-
opened an issue
54
+
<span class="{{ $textStyle }}">opened an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
39
55
{{ else if eq .Type "issue_commented" }}
40
-
commented on an issue
56
+
<span class="{{ $textStyle }}">commented on an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
41
57
{{ else if eq .Type "issue_closed" }}
42
-
closed an issue
58
+
<span class="{{ $textStyle }}">closed an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
43
59
{{ else if eq .Type "issue_reopen" }}
44
-
reopened an issue
60
+
<span class="{{ $textStyle }}">reopened an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
45
61
{{ else if eq .Type "pull_created" }}
46
-
created a pull request
62
+
<span class="{{ $textStyle }}">created a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
47
63
{{ else if eq .Type "pull_commented" }}
48
-
commented on a pull request
64
+
<span class="{{ $textStyle }}">commented on a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
49
65
{{ else if eq .Type "pull_merged" }}
50
-
merged a pull request
66
+
<span class="{{ $textStyle }}">merged a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
51
67
{{ else if eq .Type "pull_closed" }}
52
-
closed a pull request
68
+
<span class="{{ $textStyle }}">closed a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
53
69
{{ else if eq .Type "pull_reopen" }}
54
-
reopened a pull request
70
+
<span class="{{ $textStyle }}">reopened a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
55
71
{{ else if eq .Type "followed" }}
56
-
followed you
72
+
<span class="{{ $textStyle }}">followed you</span>
57
73
{{ else if eq .Type "user_mentioned" }}
58
-
mentioned you
59
-
{{ else }}
74
+
{{ if .Issue }}
75
+
<span class="{{ $textStyle }}">mentioned you on an issue in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
76
+
{{ else if .Pull }}
77
+
<span class="{{ $textStyle }}">mentioned you on a pull request in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
78
+
{{ else }}
79
+
<span class="{{ $textStyle }}">mentioned you in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
80
+
{{ end }}
60
81
{{ end }}
82
+
</span>
61
83
{{ end }}
62
84
63
85
{{ define "notificationSummary" }}
64
-
{{ if eq .Type "repo_starred" }}
65
-
<!-- no summary -->
66
-
{{ else if .Issue }}
67
-
#{{.Issue.IssueId}} {{.Issue.Title}} on {{resolve .Repo.Did}}/{{.Repo.Name}}
86
+
{{ if .Issue }}
87
+
<div class="row-start-2 col-start-2 text-sm text-gray-700 dark:text-gray-300 truncate">{{ .Issue.Title }}</div>
68
88
{{ else if .Pull }}
69
-
#{{.Pull.PullId}} {{.Pull.Title}} on {{resolve .Repo.Did}}/{{.Repo.Name}}
70
-
{{ else if eq .Type "followed" }}
71
-
<!-- no summary -->
72
-
{{ else }}
89
+
<div class="row-start-2 col-start-2 text-sm text-gray-700 dark:text-gray-300 truncate">{{ .Pull.Title }}</div>
73
90
{{ end }}
74
91
{{ end }}
75
92
+1
-1
appview/pages/templates/notifications/list.html
+1
-1
appview/pages/templates/notifications/list.html
···
12
12
</div>
13
13
14
14
{{if .Notifications}}
15
-
<div class="flex flex-col gap-2" id="notifications-list">
15
+
<div class="rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700" id="notifications-list">
16
16
{{range .Notifications}}
17
17
{{template "notifications/fragments/item" .}}
18
18
{{end}}