lewis.moe
Monorepo for Tangled
1{{ define "title" }}notifications{{ end }}
2
3{{ define "content" }}
4 <div class="p-6">
5 <div class="flex items-center justify-between mb-4">
6 <p class="text-xl font-bold dark:text-white">Notifications</p>
7 <a href="/settings/notifications" class="flex items-center gap-2">
8 {{ i "settings" "w-4 h-4" }}
9 preferences
10 </a>
11 </div>
12 </div>
13
14 <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
15 {{if .Notifications}}
16 <div class="flex flex-col gap-4" id="notifications-list">
17 {{range .Notifications}}
18 {{template "notifications/fragments/item" .}}
19 {{end}}
20 </div>
21
22 {{if .HasMore}}
23 <div class="mt-6 text-center">
24 <button
25 class="btn gap-2 group"
26 hx-get="/notifications?offset={{.NextOffset}}&limit={{.Limit}}"
27 hx-target="#notifications-list"
28 hx-swap="beforeend"
29 >
30 {{ i "chevron-down" "w-4 h-4 group-[.htmx-request]:hidden" }}
31 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
32 Load more
33 </button>
34 </div>
35 {{end}}
36 {{else}}
37 <div class="text-center py-12">
38 <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
39 {{ i "bell-off" "w-16 h-16" }}
40 </div>
41 <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
42 <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
43 </div>
44 {{end}}
45 </div>
46{{ end }}