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