alice.pds.demo.boltless.dev
This repository has no description
1{{ define "notifications/fragments/preview" }}
2 <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex-wrap gap-2">
3 {{ $read := .ReadFilter }}
4 {{ $cat := .CategoryFilter }}
5
6 <div class="flex items-center gap-2 flex-wrap">
7 <div class="btn-group">
8 <a href="#"
9 hx-get="/notifications/preview?read=inbox&category={{ $cat }}"
10 hx-target="#notif-popup"
11 hx-swap="innerHTML"
12 class="btn-group-item {{ if eq $read "inbox" }}active{{ end }}">
13 {{ i "inbox" "size-4" }} Inbox
14 </a>
15 <a href="#"
16 hx-get="/notifications/preview?read=unread&category={{ $cat }}"
17 hx-target="#notif-popup"
18 hx-swap="innerHTML"
19 class="btn-group-item {{ if eq $read "unread" }}active{{ end }}">
20 {{ i "glasses" "size-4" }} Unread
21 </a>
22 </div>
23 <button
24 hx-post="/notifications/read-all"
25 hx-swap="none"
26 hx-on::after-request="htmx.ajax('GET', '/notifications/preview?read=unread&category={{ $cat }}', {target:'#notif-popup', swap:'innerHTML'}); htmx.ajax('GET', '/notifications/count', {target:'#notification-count-desktop', swap:'innerHTML'})"
27 class="btn-flat text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex items-center gap-2 text-sm"
28 title="Mark all read">
29 {{ i "check-check" "size-4" }} Mark all read
30 </button>
31 </div>
32
33 <div class="btn-group">
34 {{ range $k, $label := list "all" "work" "social" }}
35 <a href="#"
36 hx-get="/notifications/preview?read={{ $read }}&category={{ $label }}"
37 hx-target="#notif-popup"
38 hx-swap="innerHTML"
39 class="btn-group-item {{ if eq $label $cat }}active{{ end }} capitalize">
40 {{ $label }}
41 </a>
42 {{ end }}
43 </div>
44
45 </div>
46
47 {{ if .Notifications }}
48 <div class="divide-y divide-gray-200 dark:divide-gray-700 bg-slate-100 dark:bg-gray-900">
49 {{ range .Notifications }}
50 {{ template "notifications/fragments/item" . }}
51 {{ end }}
52 </div>
53 {{ else }}
54 <div class="px-4 py-24 text-sm text-center text-gray-400 dark:text-gray-500">
55 <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
56 {{ if eq $read "unread" }}{{ i "inbox" "w-12 h-12" }}{{ else }}{{ i "bell-off" "w-12 h-12" }}{{ end }}
57 </div>
58 <p class="text-sm text-gray-500 dark:text-gray-400">{{ if eq $read "unread" }}All caught up!{{ else }}No notifications{{ end }}</p>
59 </div>
60 {{ end }}
61
62 <a href="/notifications?read={{ .ReadFilter }}&category={{ .CategoryFilter }}"
63 class="flex items-center justify-end gap-1 px-4 py-2 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50 no-underline hover:no-underline transition-colors duration-150">
64 View all {{ i "arrow-right" "size-4" }}
65 </a>
66{{ end }}