alice.pds.demo.boltless.dev
This repository has no description
1{{ define "title" }}{{ resolve .Card.UserDid }} · vouches {{ end }}
2
3{{ define "profileContent" }}
4 {{ $isSelf := and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}
5 <div id="all-vouches" class="md:col-span-8 order-2 md:order-2 flex flex-col gap-6">
6 {{ if $isSelf }}{{ template "vouchSuggestions" . }}{{ end }}
7 {{ block "vouchTimeline" . }}{{ end }}
8 {{ if ge (len .Vouches) .Page.Limit }}
9 {{ $handle := resolve .Card.UserDid }}
10 {{ template "fragments/pagination" (dict
11 "Page" .Page
12 "TotalCount" (add (len .Vouches) .Page.Offset)
13 "BasePath" (printf "/%s" $handle)
14 "QueryParams" (queryParams "tab" "vouches")
15 ) }}
16 {{ end }}
17 </div>
18{{ end }}
19
20{{ define "vouchTimeline" }}
21 {{ $isSelf := and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}
22 {{ if not .LoggedInUser }}
23 <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
24 <span>You need to <a href="/login" class="underline">log in</a> to view vouches.</span>
25 </div>
26 {{ else if not .Vouches }}
27 {{ if not (and $isSelf .Suggestions) }}
28 <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
29 <span>No vouches in your network yet.</span>
30 </div>
31 {{ end }}
32 {{ else }}
33 <div class="relative flex flex-col gap-6 ml-5 px-4 border border-transparent">
34 <div class="absolute top-8 bottom-8 w-0.5 bg-gray-200 dark:bg-gray-700 z-0"></div>
35 {{ range .Vouches }}
36 {{ template "vouchTimelineItem" (list $.Card.UserDid $.LoggedInUser.Did .) }}
37 {{ end }}
38 </div>
39 {{ end }}
40{{ end }}
41
42{{ define "vouchSuggestions" }}
43 {{ if .Suggestions }}
44 <div class="flex flex-col gap-2">
45 {{ range .Suggestions }}
46 <div class="flex items-center gap-3 border border-gray-200 dark:border-gray-700 rounded-sm p-4 bg-white dark:bg-gray-800">
47 <img src="{{ tinyAvatar .Did.String }}" alt="" class="rounded-full size-10 border border-gray-300 dark:border-gray-700 shrink-0" />
48 <div class="flex flex-col gap-0.5 min-w-0 flex-1">
49 <a href="/{{ resolve .Did.String }}" class="font-medium hover:underline dark:text-white truncate">{{ resolve .Did.String }}</a>
50 <span class="text-sm text-gray-500 dark:text-gray-400">{{ .Reason }}</span>
51 </div>
52 <div class="shrink-0 w-32">
53 {{ template "user/fragments/vouch" . }}
54 </div>
55 </div>
56 {{ end }}
57 </div>
58 {{ end }}
59{{ end }}
60
61{{ define "vouchTimelineItem" }}
62 {{ $profileDid := index . 0 }}
63 {{ $viewerDid := index . 1 }}
64 {{ $v := index . 2 }}
65 {{ $isOutgoing := eq $v.Did $profileDid }}
66 {{ $isVouch := $v.IsVouch }}
67 {{ $isSelf := eq $profileDid $viewerDid }}
68
69 <div class="-ml-5 flex items-center gap-3 relative z-10">
70 <div class="flex-shrink-0 flex items-center justify-center size-10 rounded-full
71 {{ if $isVouch }}bg-green-200 dark:bg-green-800{{ else }}bg-red-200 dark:bg-red-800{{ end }}">
72 {{ if $isVouch }}
73 {{ if $isOutgoing }}
74 {{ i "arrow-up-right" "size-5 text-green-500 dark:text-green-400" }}
75 {{ else }}
76 {{ i "arrow-down-left" "size-5 text-green-500 dark:text-green-400" }}
77 {{ end }}
78 {{ else }}
79 {{ if $isOutgoing }}
80 {{ i "arrow-up-right" "size-5 text-red-500 dark:text-red-400" }}
81 {{ else }}
82 {{ i "arrow-down-left" "size-5 text-red-500 dark:text-red-400" }}
83 {{ end }}
84 {{ end }}
85 </div>
86
87 <div class="flex flex-col gap-1">
88 <div class="flex flex-wrap items-center gap-1 text-sm dark:text-white">
89 {{ if and $isSelf $isOutgoing }}
90 <span class="font-medium text-gray-700 dark:text-gray-300">you</span>
91 {{ else }}
92 <a href="/{{ resolve $v.Did.String }}" class="font-medium hover:underline">{{ resolve $v.Did.String }}</a>
93 {{ end }}
94 <span class="text-gray-500 dark:text-gray-400">
95 {{ if $isVouch }}vouched for{{ else }}denounced{{ end }}
96 </span>
97 {{ if and $isSelf (not $isOutgoing) }}
98 <span class="font-medium text-gray-700 dark:text-gray-300">you</span>
99 {{ else }}
100 <a href="/{{ resolve $v.SubjectDid.String }}" class="font-medium hover:underline">{{ resolve $v.SubjectDid.String }}</a>
101 {{ end }}
102 <span class="text-gray-400 dark:text-gray-500 text-xs">{{ relTimeFmt $v.CreatedAt }}</span>
103 </div>
104 {{ with $v.Reason }}
105 <p class="text-gray-500 dark:text-gray-400">{{ . }}</p>
106 {{ end }}
107 </div>
108 </div>
109{{ end }}