Monorepo for Tangled tangled.org
2

Configure Feed

Select the types of activity you want to include in your feed.

appview/pages: improve notification styles

Signed-off-by: oppiliappan <me@oppi.li>

author
oppiliappan
committer
Lewis
date (May 29, 2026, 2:50 PM +0300) commit 71b07346 parent 7cf58345 change-id znxnypks
+59 -42
+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
··· 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}}