dzming.li
A vibe coded tangled fork which supports pijul.
1{{ define "user/fragments/editAvatar" }}
2<form
3 hx-post="/profile/avatar"
4 hx-encoding="multipart/form-data"
5 hx-indicator="#spinner"
6 hx-swap="none"
7 class="flex flex-col gap-2">
8 <label for="avatar-file" class="uppercase p-0">
9 Upload or Remove Avatar
10 </label>
11 <p class="text-sm text-gray-500 dark:text-gray-400">Upload a new image (PNG or JPEG, max 1MB) or remove your current avatar.</p>
12 <input
13 type="file"
14 id="avatar-file"
15 name="avatar"
16 accept="image/png,image/jpeg"
17 required
18 class="block w-full text-sm text-gray-500 dark:text-gray-400
19 file:mr-4 file:py-2 file:px-4
20 file:rounded file:border-0
21 file:text-sm file:font-semibold
22 file:bg-gray-100 file:text-gray-700
23 dark:file:bg-gray-700 dark:file:text-gray-300
24 hover:file:bg-gray-200 dark:hover:file:bg-gray-600" />
25 <div id="avatar-error" class="text-red-500 dark:text-red-400 text-sm min-h-5"></div>
26 <div class="flex flex-col gap-2 pt-2">
27 <button type="submit" class="btn w-full flex items-center justify-center gap-2">
28 <span class="inline-flex gap-2 items-center">{{ i "upload" "size-4" }} upload</span>
29 <span id="spinner" class="group">
30 {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
31 </span>
32 </button>
33 <button
34 type="button"
35 hx-delete="/profile/avatar"
36 hx-confirm="Are you sure you want to remove your profile picture?"
37 hx-swap="none"
38 class="btn w-full flex items-center justify-center gap-2">
39 {{ i "trash-2" "size-4" }}
40 remove avatar
41 </button>
42 <button
43 id="cancel-avatar-btn"
44 type="button"
45 popovertarget="avatar-upload-modal"
46 popovertargetaction="hide"
47 class="btn w-full flex items-center justify-center gap-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
48 {{ i "x" "size-4" }}
49 cancel
50 </button>
51 </div>
52</form>
53{{ end }}