+22

appview/pages/funcmap.go

··· 384 384 "fullAvatar": func(handle string) string { 385 385 return p.AvatarUrl(handle, "") 386 386 }, 387 387 + "placeholderAvatar": func(size string) template.HTML { 388 388 + sizeClass := "size-6" 389 389 + iconSize := "size-4" 390 390 + if size == "tiny" { 391 391 + sizeClass = "size-6" 392 392 + iconSize = "size-4" 393 393 + } else if size == "small" { 394 394 + sizeClass = "size-8" 395 395 + iconSize = "size-5" 396 396 + } else { 397 397 + sizeClass = "size-12" 398 398 + iconSize = "size-8" 399 399 + } 400 400 + icon, _ := p.icon("user-round", []string{iconSize, "text-gray-400", "dark:text-gray-500"}) 401 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 402 + }, 403 403 + "profileAvatarUrl": func(profile *models.Profile, size string) string { 404 404 + if profile != nil { 405 405 + return p.AvatarUrl(profile.Did, size) 406 406 + } 407 407 + return "" 408 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

··· 2 2 3 3 {{ define "extrameta" }} 4 4 {{ $handle := resolve .Card.UserDid }} 5 5 - {{ $avatarUrl := fullAvatar $handle }} 5 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

··· 1 1 + {{ define "user/fragments/editAvatar" }} 2 2 + <form 3 3 + hx-post="/profile/avatar" 4 4 + hx-encoding="multipart/form-data" 5 5 + hx-indicator="#spinner" 6 6 + hx-swap="none" 7 7 + class="flex flex-col gap-2"> 8 8 + <label for="avatar-file" class="uppercase p-0"> 9 9 + Upload avatar 10 10 + </label> 11 11 + <p class="text-sm text-gray-500 dark:text-gray-400">Select an image (PNG or JPEG, max 1MB)</p> 12 12 + <input 13 13 + type="file" 14 14 + id="avatar-file" 15 15 + name="avatar" 16 16 + accept="image/png,image/jpeg" 17 17 + required 18 18 + class="block w-full text-sm text-gray-500 dark:text-gray-400 19 19 + file:mr-4 file:py-2 file:px-4 20 20 + file:rounded file:border-0 21 21 + file:text-sm file:font-semibold 22 22 + file:bg-gray-100 file:text-gray-700 23 23 + dark:file:bg-gray-700 dark:file:text-gray-300 24 24 + hover:file:bg-gray-200 dark:hover:file:bg-gray-600" /> 25 25 + <div id="avatar-error" class="text-red-500 dark:text-red-400 text-sm min-h-5"></div> 26 26 + <div class="flex gap-2 pt-2"> 27 27 + <button 28 28 + id="cancel-avatar-btn" 29 29 + type="button" 30 30 + popovertarget="avatar-upload-modal" 31 31 + popovertargetaction="hide" 32 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 33 + {{ i "x" "size-4" }} 34 34 + cancel 35 35 + </button> 36 36 + <button type="submit" class="btn w-1/2 flex items-center"> 37 37 + <span class="inline-flex gap-2 items-center">{{ i "upload" "size-4" }} upload</span> 38 38 + <span id="spinner" class="group"> 39 39 + {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 40 40 + </span> 41 41 + </button> 42 42 + </div> 43 43 + </form> 44 44 + {{ end }}

+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 6 - <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ fullAvatar .UserDid }}" /> 6 6 + <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ profileAvatarUrl .Profile "" }}" /> 7 7 + {{ if eq .FollowStatus.String "IsSelf" }} 8 8 + <button 9 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 10 + popovertarget="avatar-upload-modal" 11 11 + popovertargetaction="toggle" 12 12 + title="Upload avatar"> 13 13 + {{ i "camera" "w-4 h-4" }} 14 14 + </button> 15 15 + {{ end }} 7 16 </div> 8 17 </div> 18 18 + <div 19 19 + id="avatar-upload-modal" 20 20 + popover 21 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 22 + {{ template "user/fragments/editAvatar" . }} 23 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 16 - {{ if .Pronouns }} 17 17 - <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p> 18 18 - {{ end }} 31 31 + {{ if .Pronouns }} 32 32 + <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p> 33 33 + {{ end }} 19 34 {{ end }} 20 35 </div> 21 36 ··· 29 44 {{ with .Profile }} 30 45 31 46 {{ if .Description }} 32 32 - <p class="text-base pb-4 md:pb-2">{{ .Description }}</p> 47 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 48 - <span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white" 49 49 - }}</span> 63 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 54 - {{ if $link }} 55 55 - <div class="flex items-center gap-2"> 56 56 - <span class="flex-shrink-0">{{ i "link" "size-4" }}</span> 57 57 - <a href="{{ $link }}">{{ $link }}</a> 58 58 - </div> 59 59 - {{ end }} 68 68 + {{ if $link }} 69 69 + <div class="flex items-center gap-2"> 70 70 + <span class="flex-shrink-0">{{ i "link" "size-4" }}</span> 71 71 + <a href="{{ $link }}">{{ $link }}</a> 72 72 + </div> 73 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 64 - {{ if $stat.Kind }} 65 65 - <div class="flex flex-col items-center gap-2"> 66 66 - <span class="text-xl font-bold">{{ $stat.Value }}</span> 67 67 - <span>{{ $stat.Kind.String }}</span> 68 68 - </div> 69 69 - {{ end }} 78 78 + {{ if $stat.Kind }} 79 79 + <div class="flex flex-col items-center gap-2"> 80 80 + <span class="text-xl font-bold">{{ $stat.Value }}</span> 81 81 + <span>{{ $stat.Kind.String }}</span> 82 82 + </div> 83 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 78 - {{ template "user/fragments/follow" . }} 92 92 + {{ template "user/fragments/follow" . }} 79 93 {{ else }} 80 80 - <button id="editBtn" class="btn w-full flex items-center gap-2 group" hx-target="#profile-bio" 81 81 - hx-get="/profile/edit-bio" hx-swap="innerHTML"> 94 94 + <button id="editBtn" 95 95 + class="btn w-full flex items-center gap-2 group" 96 96 + hx-target="#profile-bio" 97 97 + hx-get="/profile/edit-bio" 98 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

··· 62 62 hx-swap="none" 63 63 class="flex flex-col gap-2" 64 64 > 65 65 - <p class="uppercase p-0">ADD EMAIL</p> 65 65 + <label for="email-address" class="uppercase p-0"> 66 66 + add email 67 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 94 - {{ end }} 96 96 + {{ end }}

+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 24 - SSH public keys added here will be broadcasted to knots that you are a member of, 24 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 66 - <p class="uppercase p-0">ADD SSH KEY</p> 66 66 + <label for="key-name" class="uppercase p-0"> 67 67 + add ssh key 68 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"