Monorepo for Tangled
tangled.org
tangled.org
1{{ define "title" }}{{ .Tab }} settings · {{ .RepoInfo.FullName }}{{ end }}
2
3{{ define "repoContent" }}
4 <section class="w-full grid grid-cols-1 md:grid-cols-4 gap-2">
5 <div class="col-span-1">
6 {{ template "repo/settings/fragments/sidebar" . }}
7 </div>
8 <div class="col-span-1 md:col-span-3 flex flex-col gap-6 p-2">
9 {{ template "collaboratorSettings" . }}
10 </div>
11 </section>
12{{ end }}
13
14{{ define "collaboratorSettings" }}
15 <div class="grid grid-cols-1 gap-4 items-center">
16 <div class="col-span-1">
17 <h2 class="text-sm pb-2 uppercase font-bold">Collaborators</h2>
18 <p class="text-gray-500 dark:text-gray-400">
19 Any user added as a collaborator will be able to push commits and tags to this repository, upload releases, and workflows.
20 </p>
21 </div>
22 {{ template "collaboratorsGrid" . }}
23 </div>
24{{ end }}
25
26{{ define "collaboratorsGrid" }}
27 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
28 {{ if .RepoInfo.Roles.CollaboratorInviteAllowed }}
29 {{ template "addCollaboratorButton" . }}
30 {{ end }}
31 {{ range .Collaborators }}
32 {{ $handle := resolve .Did }}
33 <div class="border border-gray-200 dark:border-gray-700 rounded p-4">
34 <div class="flex items-center gap-3">
35 <img
36 src="{{ fullAvatar $handle }}"
37 alt="{{ $handle }}"
38 class="rounded-full h-10 w-10 border border-gray-300 dark:border-gray-600 flex-shrink-0"/>
39
40 <div class="flex-1 min-w-0">
41 <a href="/{{ $handle }}" class="block truncate">
42 {{ $handle }}
43 </a>
44 <p class="text-sm text-gray-500 dark:text-gray-400">{{ .Role }}</p>
45 </div>
46 </div>
47 </div>
48 {{ end }}
49 </div>
50{{ end }}
51
52{{ define "addCollaboratorButton" }}
53 <button
54 class="btn block rounded p-4"
55 popovertarget="add-collaborator-modal"
56 popovertargetaction="toggle">
57 <div class="flex items-center gap-3">
58 <div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
59 {{ i "user-plus" "size-4" }}
60 </div>
61
62 <div class="text-left flex-1 min-w-0 block truncate">
63 Add collaborator
64 </div>
65 </div>
66 </button>
67 <div
68 id="add-collaborator-modal"
69 popover
70 class="
71 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
72 dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50
73 w-full md:w-96 p-4 rounded drop-shadow overflow-visible">
74 {{ template "addCollaboratorModal" . }}
75 </div>
76{{ end }}
77
78{{ define "addCollaboratorModal" }}
79<form
80 hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator"
81 hx-indicator="#spinner"
82 hx-swap="none"
83 class="flex flex-col gap-2"
84>
85 <label for="add-collaborator" class="uppercase p-0">
86 ADD COLLABORATOR
87 </label>
88 <p class="text-sm text-gray-500 dark:text-gray-400">Collaborators can push to this repository.</p>
89 <actor-typeahead>
90 <input
91 autocapitalize="none"
92 autocorrect="off"
93 autocomplete="off"
94 type="text"
95 id="add-collaborator"
96 name="collaborator"
97 required
98 placeholder="user.tngl.sh"
99 class="w-full"
100 />
101 </actor-typeahead>
102 <div class="flex gap-2 pt-2">
103 <button
104 type="button"
105 popovertarget="add-collaborator-modal"
106 popovertargetaction="hide"
107 class="btn w-1/2 flex items-center gap-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
108 >
109 {{ i "x" "size-4" }} cancel
110 </button>
111 <button type="submit" class="btn w-1/2 flex items-center">
112 <span class="inline-flex gap-2 items-center">{{ i "user-plus" "size-4" }} add</span>
113 <span id="spinner" class="group">
114 {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
115 </span>
116 </button>
117 </div>
118 <div id="add-collaborator-error" class="text-red-500 dark:text-red-400"></div>
119</form>
120{{ end }}