alice.pds.demo.boltless.dev
This repository has no description
4.6 kB
110 lines
1{{ define "title" }}Notifications · Tangled{{ end }}
2
3{{ define "content" }}
4 <div class="flex items-center justify-between p-4 md:px-0">
5 <p class="text-xl font-bold dark:text-white">Notifications</p>
6 </div>
7
8 {{ $readVals := list
9 (dict "Key" "inbox" "Value" "Inbox" "Icon" "inbox")
10 (dict "Key" "unread" "Value" "Unread" "Icon" "glasses")
11 }}
12
13 {{/* Mobile controls: single row */}}
14 <div class="md:hidden px-4 pb-4 flex items-center justify-between">
15 <div class="flex items-center gap-2">
16 {{ template "fragments/tabSelector" (dict "Name" "read" "Values" $readVals "Active" .ReadFilter) }}
17 <button
18 hx-post="/notifications/read-all"
19 hx-swap="none"
20 hx-on::after-request="window.location.reload()"
21 class="btn-flat flex items-center gap-2 text-sm">
22 {{ i "check-check" "size-4" }} Mark all read
23 </button>
24 </div>
25 <a href="/settings/notifications" class="btn-flat">
26 {{ i "cog" "size-5" }}
27 </a>
28 </div>
29
30 {{/* Desktop controls: single row */}}
31 <div class="hidden md:flex md:px-0 pb-4 items-center justify-between gap-4">
32 <div class="flex items-center gap-2">
33 {{ template "fragments/tabSelector" (dict "Name" "read" "Values" $readVals "Active" .ReadFilter) }}
34 <button
35 hx-post="/notifications/read-all"
36 hx-swap="none"
37 hx-on::after-request="window.location.reload()"
38 class="btn-flat flex items-center gap-2 text-sm">
39 {{ i "check-check" "size-4" }} Mark all read
40 </button>
41 </div>
42 <a href="/settings/notifications" class="flex items-center gap-2 text-sm">
43 {{ i "cog" "w-4 h-4" }} Preferences
44 </a>
45 </div>
46
47 {{/* Mobile: single filtered list */}}
48 <div class="md:hidden">
49 {{ template "notifications/fragments/notifList" (dict "Groups" .MobileGroups "ReadFilter" .ReadFilter "CategoryFilter" "") }}
50 </div>
51
52 {{/* Desktop: two columns */}}
53 <div class="hidden md:grid md:grid-cols-2 md:gap-6">
54 <div>
55 {{ template "notifications/fragments/notifList" (dict "Groups" .WorkGroups "UnreadCount" .WorkUnreadCount "ReadFilter" .ReadFilter "CategoryFilter" "work") }}
56 </div>
57 <div>
58 {{ template "notifications/fragments/notifList" (dict "Groups" .SocialGroups "UnreadCount" .SocialUnreadCount "ReadFilter" .ReadFilter "CategoryFilter" "social") }}
59 </div>
60 </div>
61
62 {{ if gt .Total .Page.Limit }}
63 {{ template "fragments/pagination" (dict
64 "Page" .Page
65 "TotalCount" .Total
66 "BasePath" "/notifications"
67 "QueryParams" (queryParams "read" .ReadFilter "category" .CategoryFilter)
68 ) }}
69 {{ end }}
70{{ end }}
71
72{{ define "notifications/fragments/notifList" }}
73 {{ $readFilter := .ReadFilter }}
74 {{ $hasAny := or .Groups.Today .Groups.ThisWeek .Groups.Older }}
75 <div class="rounded-sm border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
76 {{ if or .CategoryFilter .UnreadCount }}
77 <div class="flex items-center justify-between px-2 md:px-6 py-2 bg-white dark:bg-gray-800">
78 <h2 class="capitalize text-sm font-medium dark:text-white">{{ .CategoryFilter }}</h2>
79 {{ with .UnreadCount }}
80 <span class="min-w-[20px] h-6 px-1 bg-indigo-600 dark:bg-indigo-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
81 {{ . }}
82 </span>
83 {{ end }}
84 </div>
85 {{ end }}
86 {{ if $hasAny }}
87 {{ $groupStyle := "px-2 md:px-6 py-2 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm" }}
88 {{ if .Groups.Today }}
89 <div class="{{ $groupStyle }}">Today</div>
90 {{ range .Groups.Today }}{{ template "notifications/fragments/item" . }}{{ end }}
91 {{ end }}
92 {{ if .Groups.ThisWeek }}
93 <div class="{{ $groupStyle }}">This week</div>
94 {{ range .Groups.ThisWeek }}{{ template "notifications/fragments/item" . }}{{ end }}
95 {{ end }}
96 {{ if .Groups.Older }}
97 <div class="{{ $groupStyle }}">Older</div>
98 {{ range .Groups.Older }}{{ template "notifications/fragments/item" . }}{{ end }}
99 {{ end }}
100 {{ else }}
101 <div class="bg-white dark:bg-gray-800 p-6 dark:text-white flex flex-col items-center">
102 <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
103 {{ if eq $readFilter "unread" }}{{ i "inbox" "w-12 h-12" }}{{ else }}{{ i "bell-off" "w-12 h-12" }}{{ end }}
104 </div>
105 <p class="text-sm text-gray-500 dark:text-gray-400">{{ if eq $readFilter "unread" }}All caught up!{{ else }}No notifications{{ end }}</p>
106 </div>
107 {{ end }}
108 </div>
109{{ end }}
110