Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596{{ define "title" }}Notifications · Tangled{{ end }}
{{ define "content" }} <div class="flex items-center justify-between p-4 md:px-0"> <p class="text-xl font-bold dark:text-white">Notifications</p> </div>
{{ $readVals := list (dict "Key" "inbox" "Value" "Inbox" "Icon" "inbox") (dict "Key" "unread" "Value" "Unread" "Icon" "glasses") }}
{{/* Desktop controls: single row */}} <div class="flex md:px-0 px-4 pb-4 items-center justify-between gap-4"> <div class="flex items-center gap-2"> {{ template "fragments/tabSelector" (dict "Name" "read" "Values" $readVals "Active" .ReadFilter) }} {{ template "focus/fragments/beginButton" . }} <button hx-post="/notifications/read-all" hx-swap="none" hx-on::after-request="window.location.reload()" class="btn-flat flex items-center gap-2 text-sm"> {{ i "check-check" "size-4" }} Mark all read </button> </div> <a href="/settings/notifications" class="flex items-center gap-2 text-sm"> {{ i "cog" "w-4 h-4" }} <span class="hidden md:inline">Preferences</span> </a> </div>
{{/* Mobile: single filtered list */}} <div class="md:hidden"> {{ template "notifications/fragments/notifList" (dict "Groups" .MobileGroups "ReadFilter" .ReadFilter "CategoryFilter" "") }} </div>
{{/* Desktop: two columns */}} <div class="hidden md:grid md:grid-cols-2 md:gap-6"> <div> {{ template "notifications/fragments/notifList" (dict "Groups" .WorkGroups "UnreadCount" .WorkUnreadCount "ReadFilter" .ReadFilter "CategoryFilter" "work") }} </div> <div> {{ template "notifications/fragments/notifList" (dict "Groups" .SocialGroups "UnreadCount" .SocialUnreadCount "ReadFilter" .ReadFilter "CategoryFilter" "social") }} </div> </div>
{{ if gt .Total .Page.Limit }} {{ template "fragments/pagination" (dict "Page" .Page "TotalCount" .Total "BasePath" "/notifications" "QueryParams" (queryParams "read" .ReadFilter "category" .CategoryFilter) ) }} {{ end }}{{ end }}
{{ define "notifications/fragments/notifList" }} {{ $readFilter := .ReadFilter }} {{ $hasAny := or .Groups.Today .Groups.ThisWeek .Groups.Older }} <div class="rounded-sm border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700"> {{ if or .CategoryFilter .UnreadCount }} <div class="flex items-center justify-between px-2 md:px-6 py-2 bg-white dark:bg-gray-800"> <h2 class="capitalize text-sm font-medium dark:text-white">{{ .CategoryFilter }}</h2> {{ with .UnreadCount }} <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"> {{ . }} </span> {{ end }} </div> {{ end }} {{ if $hasAny }} {{ $groupStyle := "px-2 md:px-6 py-2 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm" }} {{ if .Groups.Today }} <div class="{{ $groupStyle }}">Today</div> {{ range .Groups.Today }}{{ template "notifications/fragments/item" . }}{{ end }} {{ end }} {{ if .Groups.ThisWeek }} <div class="{{ $groupStyle }}">This week</div> {{ range .Groups.ThisWeek }}{{ template "notifications/fragments/item" . }}{{ end }} {{ end }} {{ if .Groups.Older }} <div class="{{ $groupStyle }}">Older</div> {{ range .Groups.Older }}{{ template "notifications/fragments/item" . }}{{ end }} {{ end }} {{ else }} <div class="bg-white dark:bg-gray-800 p-6 dark:text-white flex flex-col items-center"> <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600"> {{ if eq $readFilter "unread" }}{{ i "inbox" "w-12 h-12" }}{{ else }}{{ i "bell-off" "w-12 h-12" }}{{ end }} </div> <p class="text-sm text-gray-500 dark:text-gray-400">{{ if eq $readFilter "unread" }}All caught up!{{ else }}No notifications{{ end }}</p> </div> {{ end }} </div>{{ end }}