forked from tangled.org/core
Monorepo for Tangled

appview/notifications: add link element to each notification

oppi.li 5c9bf597 054a6a04

verified
Changed files
+27 -208
appview
pages
templates
notifications
fragments
+27 -208
appview/pages/templates/notifications/fragments/item.html
··· 1 1 {{define "notifications/fragments/item"}} 2 - <div 3 - class=" 4 - 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 5 - {{if not .Read}}bg-blue-50 dark:bg-blue-900/20 border border-blue-500 dark:border-sky-800{{end}} 6 - flex gap-2 items-center 7 - " 8 - > 2 + <a href="{{ template "notificationUrl" . }}" class="block no-underline hover:no-underline"> 3 + <div 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 8 + "> 9 + {{ template "notificationIcon" . }} 10 + <div class="flex-1 w-full flex flex-col gap-1"> 11 + <span>{{ template "notificationHeader" . }}</span> 12 + <span class="text-sm text-gray-500 dark:text-gray-400">{{ template "notificationSummary" . }}</span> 13 + </div> 9 14 10 - {{ template "notificationIcon" . }} 11 - <div class="flex-1 w-full flex flex-col gap-1"> 12 - <span>{{ template "notificationHeader" . }}</span> 13 - <span class="text-sm text-gray-500 dark:text-gray-400">{{ template "notificationSummary" . }}</span> 14 15 </div> 15 - 16 - </div> 16 + </a> 17 17 {{end}} 18 18 19 19 {{ define "notificationIcon" }} ··· 64 64 {{ end }} 65 65 {{ end }} 66 66 67 - {{define "issueNotification"}} 68 - {{$url := printf "/%s/%s/issues/%d" (resolve .Repo.Did) .Repo.Name .Issue.IssueId}} 69 - <a 70 - href="{{$url}}" 71 - class="block no-underline hover:no-underline text-inherit -m-3 p-3" 72 - > 73 - <div class="flex items-center justify-between"> 74 - <div class="min-w-0 flex-1"> 75 - <!-- First line: icon + actor action --> 76 - <div class="flex items-center gap-2 text-gray-900 dark:text-white"> 77 - {{if eq .Type "issue_created"}} 78 - <span class="text-green-600 dark:text-green-500"> 79 - {{ i "circle-dot" "w-4 h-4" }} 80 - </span> 81 - {{else if eq .Type "issue_commented"}} 82 - <span class="text-gray-500 dark:text-gray-400"> 83 - {{ i "message-circle" "w-4 h-4" }} 84 - </span> 85 - {{else if eq .Type "issue_closed"}} 86 - <span class="text-gray-500 dark:text-gray-400"> 87 - {{ i "ban" "w-4 h-4" }} 88 - </span> 89 - {{end}} 90 - {{template "user/fragments/picHandle" .ActorDid}} 91 - {{if eq .Type "issue_created"}} 92 - <span class="text-gray-500 dark:text-gray-400">opened issue</span> 93 - {{else if eq .Type "issue_commented"}} 94 - <span class="text-gray-500 dark:text-gray-400">commented on issue</span> 95 - {{else if eq .Type "issue_closed"}} 96 - <span class="text-gray-500 dark:text-gray-400">closed issue</span> 97 - {{end}} 98 - {{if not .Read}} 99 - <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div> 100 - {{end}} 101 - </div> 102 - 103 - <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5 ml-6 flex items-center gap-1"> 104 - <span class="text-gray-500 dark:text-gray-400">#{{.Issue.IssueId}}</span> 105 - <span class="text-gray-900 dark:text-white truncate">{{.Issue.Title}}</span> 106 - <span>on</span> 107 - <span class="font-medium text-gray-900 dark:text-white">{{resolve .Repo.Did}}/{{.Repo.Name}}</span> 108 - </div> 109 - </div> 67 + {{ define "notificationUrl" }} 68 + {{ $url := "" }} 69 + {{ if eq .Type "repo_starred" }} 70 + {{$url = printf "/%s/%s" (resolve .Repo.Did) .Repo.Name}} 71 + {{ else if .Issue }} 72 + {{$url = printf "/%s/%s/issues/%d" (resolve .Repo.Did) .Repo.Name .Issue.IssueId}} 73 + {{ else if .Pull }} 74 + {{$url = printf "/%s/%s/pulls/%d" (resolve .Repo.Did) .Repo.Name .Pull.PullId}} 75 + {{ else if eq .Type "followed" }} 76 + {{$url = printf "/%s" (resolve .ActorDid)}} 77 + {{ else }} 78 + {{ end }} 110 79 111 - <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2"> 112 - {{ template "repo/fragments/time" .Created }} 113 - </div> 114 - </div> 115 - </a> 116 - {{end}} 117 - 118 - {{define "pullNotification"}} 119 - {{$url := printf "/%s/%s/pulls/%d" (resolve .Repo.Did) .Repo.Name .Pull.PullId}} 120 - <a 121 - href="{{$url}}" 122 - class="block no-underline hover:no-underline text-inherit -m-3 p-3" 123 - > 124 - <div class="flex items-center justify-between"> 125 - <div class="min-w-0 flex-1"> 126 - <div class="flex items-center gap-2 text-gray-900 dark:text-white"> 127 - {{if eq .Type "pull_created"}} 128 - <span class="text-green-600 dark:text-green-500"> 129 - {{ i "git-pull-request-create" "w-4 h-4" }} 130 - </span> 131 - {{else if eq .Type "pull_commented"}} 132 - <span class="text-gray-500 dark:text-gray-400"> 133 - {{ i "message-circle" "w-4 h-4" }} 134 - </span> 135 - {{else if eq .Type "pull_merged"}} 136 - <span class="text-purple-600 dark:text-purple-500"> 137 - {{ i "git-merge" "w-4 h-4" }} 138 - </span> 139 - {{else if eq .Type "pull_closed"}} 140 - <span class="text-red-600 dark:text-red-500"> 141 - {{ i "git-pull-request-closed" "w-4 h-4" }} 142 - </span> 143 - {{end}} 144 - {{template "user/fragments/picHandle" (resolve .ActorDid)}} 145 - {{if eq .Type "pull_created"}} 146 - <span class="text-gray-500 dark:text-gray-400">opened pull request</span> 147 - {{else if eq .Type "pull_commented"}} 148 - <span class="text-gray-500 dark:text-gray-400">commented on pull request</span> 149 - {{else if eq .Type "pull_merged"}} 150 - <span class="text-gray-500 dark:text-gray-400">merged pull request</span> 151 - {{else if eq .Type "pull_closed"}} 152 - <span class="text-gray-500 dark:text-gray-400">closed pull request</span> 153 - {{end}} 154 - {{if not .Read}} 155 - <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div> 156 - {{end}} 157 - </div> 158 - 159 - <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5 ml-6 flex items-center gap-1"> 160 - <span class="text-gray-500 dark:text-gray-400">#{{.Pull.PullId}}</span> 161 - <span class="text-gray-900 dark:text-white truncate">{{.Pull.Title}}</span> 162 - <span>on</span> 163 - <span class="font-medium text-gray-900 dark:text-white">{{resolve .Repo.Did}}/{{.Repo.Name}}</span> 164 - </div> 165 - </div> 166 - 167 - <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2"> 168 - {{ template "repo/fragments/time" .Created }} 169 - </div> 170 - </div> 171 - </a> 172 - {{end}} 173 - 174 - {{define "repoNotification"}} 175 - {{$url := printf "/%s/%s" (resolve .Repo.Did) .Repo.Name}} 176 - <a 177 - href="{{$url}}" 178 - class="block no-underline hover:no-underline text-inherit -m-3 p-3" 179 - > 180 - <div class="flex items-center justify-between"> 181 - <div class="flex items-center gap-2 min-w-0 flex-1"> 182 - <span class="text-yellow-500 dark:text-yellow-400"> 183 - {{ i "star" "w-4 h-4" }} 184 - </span> 185 - 186 - <div class="min-w-0 flex-1"> 187 - <!-- Single line for stars: actor action subject --> 188 - <div class="flex items-center gap-1 text-gray-900 dark:text-white"> 189 - {{template "user/fragments/picHandle" (resolve .ActorDid)}} 190 - <span class="text-gray-500 dark:text-gray-400">starred</span> 191 - <span class="font-medium">{{resolve .Repo.Did}}/{{.Repo.Name}}</span> 192 - {{if not .Read}} 193 - <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div> 194 - {{end}} 195 - </div> 196 - </div> 197 - </div> 198 - 199 - <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2"> 200 - {{ template "repo/fragments/time" .Created }} 201 - </div> 202 - </div> 203 - </a> 204 - {{end}} 205 - 206 - {{define "followNotification"}} 207 - {{$url := printf "/%s" (resolve .ActorDid)}} 208 - <a 209 - href="{{$url}}" 210 - class="block no-underline hover:no-underline text-inherit -m-3 p-3" 211 - > 212 - <div class="flex items-center justify-between"> 213 - <div class="flex items-center gap-2 min-w-0 flex-1"> 214 - <span class="text-blue-600 dark:text-blue-400"> 215 - {{ i "user-plus" "w-4 h-4" }} 216 - </span> 217 - 218 - <div class="min-w-0 flex-1"> 219 - <div class="flex items-center gap-1 text-gray-900 dark:text-white"> 220 - {{template "user/fragments/picHandle" (resolve .ActorDid)}} 221 - <span class="text-gray-500 dark:text-gray-400">followed you</span> 222 - {{if not .Read}} 223 - <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div> 224 - {{end}} 225 - </div> 226 - </div> 227 - </div> 228 - 229 - <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2"> 230 - {{ template "repo/fragments/time" .Created }} 231 - </div> 232 - </div> 233 - </a> 234 - {{end}} 235 - 236 - {{define "genericNotification"}} 237 - <a 238 - href="#" 239 - class="block no-underline hover:no-underline text-inherit -m-3 p-3" 240 - > 241 - <div class="flex items-center justify-between"> 242 - <div class="flex items-center gap-2 min-w-0 flex-1"> 243 - <span class="{{if not .Read}}text-blue-600 dark:text-blue-400{{else}}text-gray-500 dark:text-gray-400{{end}}"> 244 - {{ i "bell" "w-4 h-4" }} 245 - </span> 246 - 247 - <div class="min-w-0 flex-1"> 248 - <div class="flex items-center gap-1 text-gray-900 dark:text-white"> 249 - <span>New notification</span> 250 - {{if not .Read}} 251 - <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div> 252 - {{end}} 253 - </div> 254 - </div> 255 - </div> 256 - 257 - <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2"> 258 - {{ template "repo/fragments/time" .Created }} 259 - </div> 260 - </div> 261 - </a> 262 - {{end}} 80 + {{ $url }} 81 + {{ end }}