appview/pages: upload and render avatar

Signed-off-by: Anirudh Oppiliappan <[e-mail]>

appview/pages/funcmap.go

···
 		"fullAvatar": func(handle string) string {
 			return p.AvatarUrl(handle, "")
 		},
+		"placeholderAvatar": func(size string) template.HTML {
+			sizeClass := "size-6"
+			iconSize := "size-4"
+			if size == "tiny" {
+				sizeClass = "size-6"
+				iconSize = "size-4"
+			} else if size == "small" {
+				sizeClass = "size-8"
+				iconSize = "size-5"
+			} else {
+				sizeClass = "size-12"
+				iconSize = "size-8"
+			}
+			icon, _ := p.icon("user-round", []string{iconSize, "text-gray-400", "dark:text-gray-500"})
+			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))
+		},
+		"profileAvatarUrl": func(profile *models.Profile, size string) string {
+			if profile != nil {
+				return p.AvatarUrl(profile.Did, size)
+			}
+			return ""
+		},
 		"langColor": enry.GetColor,
 		"layoutSide": func() string {
 			return "col-span-1 md:col-span-2 lg:col-span-3"

appview/pages/templates/layouts/profilebase.html

···
 
 {{ define "extrameta" }}
     {{ $handle := resolve .Card.UserDid }}
-    {{ $avatarUrl := fullAvatar $handle }}
+    {{ $avatarUrl := profileAvatarUrl .Card.Profile "" }}
     <meta property="og:title" content="{{ $handle }}" />
     <meta property="og:type" content="profile" />
     <meta property="og:url" content="https://tangled.org/{{ $handle }}?tab={{ .Active }}" />

appview/pages/templates/user/fragments/editAvatar.html

···
+{{ define "user/fragments/editAvatar" }}
+<form
+  hx-post="/profile/avatar"
+  hx-encoding="multipart/form-data"
+  hx-indicator="#spinner"
+  hx-swap="none"
+  class="flex flex-col gap-2">
+  <label for="avatar-file" class="uppercase p-0">
+    Upload avatar
+  </label>
+  <p class="text-sm text-gray-500 dark:text-gray-400">Select an image (PNG or JPEG, max 1MB)</p>
+  <input
+    type="file"
+    id="avatar-file"
+    name="avatar"
+    accept="image/png,image/jpeg"
+    required
+    class="block w-full text-sm text-gray-500 dark:text-gray-400
+      file:mr-4 file:py-2 file:px-4
+      file:rounded file:border-0
+      file:text-sm file:font-semibold
+      file:bg-gray-100 file:text-gray-700
+      dark:file:bg-gray-700 dark:file:text-gray-300
+      hover:file:bg-gray-200 dark:hover:file:bg-gray-600" />
+  <div class="flex gap-2 pt-2">
+    <button
+      id="cancel-avatar-btn"
+      type="button"
+      popovertarget="avatar-upload-modal"
+      popovertargetaction="hide"
+      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">
+      {{ i "x" "size-4" }}
+      cancel
+    </button>
+    <button type="submit" class="btn w-1/2 flex items-center">
+      <span class="inline-flex gap-2 items-center">{{ i "upload" "size-4" }} upload</span>
+      <span id="spinner" class="group">
+        {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+      </span>
+    </button>
+  </div>
+  <div id="avatar-error" class="text-red-500 dark:text-red-400"></div>
+</form>
+{{ end }}

appview/pages/templates/user/fragments/profileCard.html

···
     <div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center">
       <div id="avatar" class="col-span-1 flex justify-center items-center">
         <div class="w-3/4 aspect-square relative">
-          <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ fullAvatar .UserDid }}" />
+          <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ profileAvatarUrl .Profile "" }}" />
+          {{ if eq .FollowStatus.String "IsSelf" }}
+            <button
+              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"
+              popovertarget="avatar-upload-modal"
+              popovertargetaction="toggle"
+              title="Upload avatar">
+              {{ i "camera" "w-4 h-4" }}
+            </button>
+          {{ end }}
         </div>
+      </div>
+      <div
+        id="avatar-upload-modal"
+        popover
+        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">
+        {{ template "user/fragments/editAvatar" . }}
       </div>
       <div class="col-span-2">
         <div class="flex items-center flex-row flex-nowrap gap-2">
···
             {{ block "followerFollowing" (list $ $userIdent) }} {{ end }}
           </div>
 
-          <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> 
+          <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
             {{ if .Location }}
             <div class="flex items-center gap-2">
               <span class="flex-shrink-0">{{ i "map-pin" "size-4" }}</span>
···
     </div>
   {{ end }}
 {{ end }}
-

appview/pages/templates/user/settings/emails.html

···
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <p class="uppercase p-0">ADD EMAIL</p>
+  <label for="email-address" class="uppercase p-0">
+    add email
+  </label>
   <p class="text-sm text-gray-500 dark:text-gray-400">Commits using this email will be associated with your profile.</p>
   <input
     type="email"

appview/pages/templates/user/settings/keys.html

···
     <div class="col-span-1 md:col-span-2">
       <h2 class="text-sm pb-2 uppercase font-bold">SSH Keys</h2>
       <p class="text-gray-500 dark:text-gray-400">
-        SSH public keys added here will be broadcasted to knots that you are a member of, 
+        SSH public keys added here will be broadcasted to knots that you are a member of,
         allowing you to push to repositories there.
       </p>
     </div>
···
   hx-swap="none"
   class="flex flex-col gap-2"
 >
-  <p class="uppercase p-0">ADD SSH KEY</p>
+  <label for="key-name" class="uppercase p-0">
+      add ssh key
+    </label>
   <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>
   <input
     type="text"