Monorepo for Tangled
tangled.org
1{{ define "title" }}Vouches · {{ resolve .Card.UserDid }} · Tangled{{ 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 gt .VouchCount .Page.Limit }}
9 {{ $handle := resolve .Card.UserDid }}
10 {{ template "fragments/pagination" (dict
11 "Page" .Page
12 "TotalCount" .VouchCount
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 . $.EvidencePulls $.EvidenceIssues) }}
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-4 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" (dict "VouchRelationship" .VouchRelationship) }}
54 </div>
55 <button
56 hx-post="/vouch/skip?subject={{ .Did.String }}"
57 hx-trigger="click"
58 hx-disabled-elt="this"
59 title="Skip suggestion"
60 class="group hit-area hit-area-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 p-0.5"
61 >
62 {{ i "x" "size-4 block group-[.htmx-request]:hidden" }}
63 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:block" }}
64 </button>
65 </div>
66 {{ end }}
67 </div>
68 {{ end }}
69{{ end }}
70
71{{ define "vouchTimelineItem" }}
72 {{ $profileDid := index . 0 }}
73 {{ $viewerDid := index . 1 }}
74 {{ $v := index . 2 }}
75 {{ $evidencePulls := index . 3 }}
76 {{ $evidenceIssues := index . 4 }}
77 {{ $isOutgoing := eq $v.Did $profileDid }}
78 {{ $isVouch := $v.IsVouch }}
79 {{ $isSelf := eq $profileDid $viewerDid }}
80
81 <div class="-ml-4 flex items-start gap-3 relative z-10">
82 <div class="flex-shrink-0 flex items-center justify-center size-8 rounded-full
83 {{ if $isVouch }}bg-green-200 dark:bg-green-800{{ else }}bg-red-200 dark:bg-red-800{{ end }}
84 border border-gray-300 dark:border-gray-700
85 ">
86 {{ if $isVouch }}
87 {{ if $isOutgoing }}
88 {{ i "arrow-up-right" "size-5 text-green-500 dark:text-green-400" }}
89 {{ else }}
90 {{ i "arrow-down-left" "size-5 text-green-500 dark:text-green-400" }}
91 {{ end }}
92 {{ else }}
93 {{ if $isOutgoing }}
94 {{ i "arrow-up-right" "size-5 text-red-500 dark:text-red-400" }}
95 {{ else }}
96 {{ i "arrow-down-left" "size-5 text-red-500 dark:text-red-400" }}
97 {{ end }}
98 {{ end }}
99 </div>
100
101 <div class="flex flex-col gap-1 mt-1">
102 <div class="flex flex-wrap items-center gap-1 dark:text-white">
103 {{ if and $isSelf $isOutgoing }}
104 <span class="font-medium text-gray-700 dark:text-gray-300">you</span>
105 {{ else }}
106 <a href="/{{ resolve $v.Did.String }}" class="font-medium hover:underline">{{ resolve $v.Did.String }}</a>
107 {{ end }}
108 <span class="text-gray-500 dark:text-gray-400">
109 {{ if $isVouch }}vouched for{{ else }}denounced{{ end }}
110 </span>
111 {{ if and $isSelf (not $isOutgoing) }}
112 <span class="font-medium text-gray-700 dark:text-gray-300">you</span>
113 {{ else }}
114 <a href="/{{ resolve $v.SubjectDid.String }}" class="font-medium hover:underline">{{ resolve $v.SubjectDid.String }}</a>
115 {{ end }}
116 <span class="text-gray-400 dark:text-gray-500 text-sm">{{ relTimeFmt $v.CreatedAt }}</span>
117 </div>
118 {{ with $v.Reason }}
119 <p class="text-gray-500 dark:text-gray-400 text-sm">{{ . }}</p>
120 {{ end }}
121 {{ if $v.Evidences }}
122 <div class="flex flex-col gap-2 mt-1 text-sm">
123 {{ range $v.Evidences }}
124 {{ $pull := index $evidencePulls . }}
125 {{ $issue := index $evidenceIssues . }}
126 {{ if $pull }}
127 {{ template "user/fragments/pullEvent" $pull }}
128 {{ else if $issue }}
129 {{ template "user/fragments/issueEvent" $issue }}
130 {{ end }}
131 {{ end }}
132 </div>
133 {{ end }}
134 </div>
135 </div>
136{{ end }}