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