alice.pds.demo.boltless.dev
This repository has no description
appview/pages: upload and render avatar
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
author
Anirudh Oppiliappan
committer
did:plc:wshs7t2adsemcrrd4snkeq…
date
(Jan 26, 2026, 6:44 AM UTC)
commit
46971571
46971571d17ef3e0cdfbadb8e0d3e4d074c12604
parent
cadc5da0
cadc5da04d9fdc6272490f64334ac3d3b1d45e15
change-id
tolqptym
tolqptymwvpqvmnkonyqqwuxkvxkyunx
did:plc:wshs7t2adsemcrrd4snkeq…
date
(Jan 26, 2026, 6:44 AM UTC)
commit
46971571
46971571d17ef3e0cdfbadb8e0d3e4d074c12604
parent
cadc5da0
cadc5da04d9fdc6272490f64334ac3d3b1d45e15
change-id
tolqptym
tolqptymwvpqvmnkonyqqwuxkvxkyunx
+114
-27
+22
appview/pages/funcmap.go
+22
appview/pages/funcmap.go
···
384
384
"fullAvatar": func(handle string) string {
385
385
return p.AvatarUrl(handle, "")
386
386
},
387
+
"placeholderAvatar": func(size string) template.HTML {
388
+
sizeClass := "size-6"
389
+
iconSize := "size-4"
390
+
if size == "tiny" {
391
+
sizeClass = "size-6"
392
+
iconSize = "size-4"
393
+
} else if size == "small" {
394
+
sizeClass = "size-8"
395
+
iconSize = "size-5"
396
+
} else {
397
+
sizeClass = "size-12"
398
+
iconSize = "size-8"
399
+
}
400
+
icon, _ := p.icon("user-round", []string{iconSize, "text-gray-400", "dark:text-gray-500"})
401
+
return template.HTML(fmt.Sprintf(`<div class="%s rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">%s</div>`, sizeClass, icon))
402
+
},
403
+
"profileAvatarUrl": func(profile *models.Profile, size string) string {
404
+
if profile != nil {
405
+
return p.AvatarUrl(profile.Did, size)
406
+
}
407
+
return ""
408
+
},
387
409
"langColor": enry.GetColor,
388
410
"reverse": func(s any) any {
389
411
if s == nil {
+1
-1
appview/pages/templates/layouts/profilebase.html
+1
-1
appview/pages/templates/layouts/profilebase.html
···
2
2
3
3
{{ define "extrameta" }}
4
4
{{ $handle := resolve .Card.UserDid }}
5
-
{{ $avatarUrl := fullAvatar $handle }}
5
+
{{ $avatarUrl := profileAvatarUrl .Card.Profile "" }}
6
6
<meta property="og:title" content="{{ $handle }}" />
7
7
<meta property="og:type" content="profile" />
8
8
<meta property="og:url" content="https://tangled.org/{{ $handle }}?tab={{ .Active }}" />
+44
appview/pages/templates/user/fragments/editAvatar.html
+44
appview/pages/templates/user/fragments/editAvatar.html
···
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 avatar
10
+
</label>
11
+
<p class="text-sm text-gray-500 dark:text-gray-400">Select an image (PNG or JPEG, max 1MB)</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 gap-2 pt-2">
27
+
<button
28
+
id="cancel-avatar-btn"
29
+
type="button"
30
+
popovertarget="avatar-upload-modal"
31
+
popovertargetaction="hide"
32
+
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">
33
+
{{ i "x" "size-4" }}
34
+
cancel
35
+
</button>
36
+
<button type="submit" class="btn w-1/2 flex items-center">
37
+
<span class="inline-flex gap-2 items-center">{{ i "upload" "size-4" }} upload</span>
38
+
<span id="spinner" class="group">
39
+
{{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
40
+
</span>
41
+
</button>
42
+
</div>
43
+
</form>
44
+
{{ end }}
+39
-22
appview/pages/templates/user/fragments/profileCard.html
+39
-22
appview/pages/templates/user/fragments/profileCard.html
···
3
3
<div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center">
4
4
<div id="avatar" class="col-span-1 flex justify-center items-center">
5
5
<div class="w-3/4 aspect-square relative">
6
-
<img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ fullAvatar .UserDid }}" />
6
+
<img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ profileAvatarUrl .Profile "" }}" />
7
+
{{ if eq .FollowStatus.String "IsSelf" }}
8
+
<button
9
+
class="absolute bottom-2 right-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
10
+
popovertarget="avatar-upload-modal"
11
+
popovertargetaction="toggle"
12
+
title="Upload avatar">
13
+
{{ i "camera" "w-4 h-4" }}
14
+
</button>
15
+
{{ end }}
7
16
</div>
8
17
</div>
18
+
<div
19
+
id="avatar-upload-modal"
20
+
popover
21
+
class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
22
+
{{ template "user/fragments/editAvatar" . }}
23
+
</div>
9
24
<div class="col-span-2">
10
25
<div class="flex items-center flex-row flex-nowrap gap-2">
11
26
<p title="{{ $userIdent }}"
···
13
28
{{ $userIdent }}
14
29
</p>
15
30
{{ with .Profile }}
16
-
{{ if .Pronouns }}
17
-
<p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
18
-
{{ end }}
31
+
{{ if .Pronouns }}
32
+
<p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
33
+
{{ end }}
19
34
{{ end }}
20
35
</div>
21
36
···
29
44
{{ with .Profile }}
30
45
31
46
{{ if .Description }}
32
-
<p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
47
+
<p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
33
48
{{ end }}
34
49
35
50
<div class="hidden md:block">
···
45
60
{{ end }}
46
61
{{ if .IncludeBluesky }}
47
62
<div class="flex items-center gap-2">
48
-
<span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white"
49
-
}}</span>
63
+
<span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white" }}</span>
50
64
<a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ $userIdent }}</a>
51
65
</div>
52
66
{{ end }}
53
67
{{ range $link := .Links }}
54
-
{{ if $link }}
55
-
<div class="flex items-center gap-2">
56
-
<span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
57
-
<a href="{{ $link }}">{{ $link }}</a>
58
-
</div>
59
-
{{ end }}
68
+
{{ if $link }}
69
+
<div class="flex items-center gap-2">
70
+
<span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
71
+
<a href="{{ $link }}">{{ $link }}</a>
72
+
</div>
73
+
{{ end }}
60
74
{{ end }}
61
75
{{ if not $profile.IsStatsEmpty }}
62
76
<div class="flex items-center justify-evenly gap-2 py-2">
63
77
{{ range $stat := .Stats }}
64
-
{{ if $stat.Kind }}
65
-
<div class="flex flex-col items-center gap-2">
66
-
<span class="text-xl font-bold">{{ $stat.Value }}</span>
67
-
<span>{{ $stat.Kind.String }}</span>
68
-
</div>
69
-
{{ end }}
78
+
{{ if $stat.Kind }}
79
+
<div class="flex flex-col items-center gap-2">
80
+
<span class="text-xl font-bold">{{ $stat.Value }}</span>
81
+
<span>{{ $stat.Kind.String }}</span>
82
+
</div>
83
+
{{ end }}
70
84
{{ end }}
71
85
</div>
72
86
{{ end }}
···
75
89
76
90
<div class="flex mt-2 items-center gap-2">
77
91
{{ if ne .FollowStatus.String "IsSelf" }}
78
-
{{ template "user/fragments/follow" . }}
92
+
{{ template "user/fragments/follow" . }}
79
93
{{ else }}
80
-
<button id="editBtn" class="btn w-full flex items-center gap-2 group" hx-target="#profile-bio"
81
-
hx-get="/profile/edit-bio" hx-swap="innerHTML">
94
+
<button id="editBtn"
95
+
class="btn w-full flex items-center gap-2 group"
96
+
hx-target="#profile-bio"
97
+
hx-get="/profile/edit-bio"
98
+
hx-swap="innerHTML">
82
99
{{ i "pencil" "w-4 h-4" }}
83
100
edit
84
101
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+4
-2
appview/pages/templates/user/settings/emails.html
+4
-2
appview/pages/templates/user/settings/emails.html
···
62
62
hx-swap="none"
63
63
class="flex flex-col gap-2"
64
64
>
65
-
<p class="uppercase p-0">ADD EMAIL</p>
65
+
<label for="email-address" class="uppercase p-0">
66
+
add email
67
+
</label>
66
68
<p class="text-sm text-gray-500 dark:text-gray-400">Commits using this email will be associated with your profile.</p>
67
69
<input
68
70
type="email"
···
91
93
<div id="settings-emails-error" class="text-red-500 dark:text-red-400"></div>
92
94
<div id="settings-emails-success" class="text-green-500 dark:text-green-400"></div>
93
95
</form>
94
-
{{ end }}
96
+
{{ end }}
+4
-2
appview/pages/templates/user/settings/keys.html
+4
-2
appview/pages/templates/user/settings/keys.html
···
21
21
<div class="col-span-1 md:col-span-2">
22
22
<h2 class="text-sm pb-2 uppercase font-bold">SSH Keys</h2>
23
23
<p class="text-gray-500 dark:text-gray-400">
24
-
SSH public keys added here will be broadcasted to knots that you are a member of,
24
+
SSH public keys added here will be broadcasted to knots that you are a member of,
25
25
allowing you to push to repositories there.
26
26
</p>
27
27
</div>
···
63
63
hx-swap="none"
64
64
class="flex flex-col gap-2"
65
65
>
66
-
<p class="uppercase p-0">ADD SSH KEY</p>
66
+
<label for="key-name" class="uppercase p-0">
67
+
add ssh key
68
+
</label>
67
69
<p class="text-sm text-gray-500 dark:text-gray-400">SSH keys allow you to push to repositories in knots you're a member of.</p>
68
70
<input
69
71
type="text"