Monorepo for Tangled
tangled.org
1{{ define "notifications/fragments/preview" }}
2 {{ $read := .ReadFilter }}
3 {{ $cat := .CategoryFilter }}
4
5 <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex-wrap gap-2">
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={{ $read }}&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 {{ if and .CanFocus (not .FocusParams.Focusing) }}
34 {{ template "focus/fragments/beginButton" . }}
35 {{ else if not .FocusParams.Focusing }}
36 <div class="btn-group">
37 {{ range $k, $label := list "all" "work" "social" }}
38 <a href="#"
39 hx-get="/notifications/preview?read={{ $read }}&category={{ $label }}"
40 hx-target="#notif-popup"
41 hx-swap="innerHTML"
42 class="btn-group-item {{ if eq $label $cat }}active{{ end }} capitalize">
43 {{ $label }}
44 </a>
45 {{ end }}
46 </div>
47 {{ end }}
48
49 </div>
50
51 {{ if .Notifications }}
52 <div class="divide-y divide-gray-200 dark:divide-gray-700 bg-slate-100 dark:bg-gray-900">
53 {{ range .Notifications }}
54 {{ template "notifications/fragments/item" . }}
55 {{ end }}
56 </div>
57 {{ else }}
58 <div class="px-4 py-24 text-sm text-center text-gray-400 dark:text-gray-500">
59 <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
60 {{ if eq $read "unread" }}{{ i "inbox" "w-12 h-12" }}{{ else }}{{ i "bell-off" "w-12 h-12" }}{{ end }}
61 </div>
62 <p class="text-sm text-gray-500 dark:text-gray-400">{{ if eq $read "unread" }}All caught up!{{ else }}No notifications{{ end }}</p>
63 </div>
64 {{ end }}
65
66 <a href="/notifications?read={{ .ReadFilter }}&category={{ .CategoryFilter }}"
67 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">
68 View all {{ i "arrow-right" "size-4" }}
69 </a>
70{{ end }}