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,
 		"reverse": func(s any) any {
 			if s == nil {

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 id="avatar-error" class="text-red-500 dark:text-red-400 text-sm min-h-5"></div>
+  <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>
+</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">
       <p title="{{ $userIdent }}"
···
         {{ $userIdent }}
       </p>
       {{ with .Profile }}
-      {{ if .Pronouns }}
-      <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
-      {{ end }}
+        {{ if .Pronouns }}
+          <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
+        {{ end }}
       {{ end }}
     </div>
 
···
       {{ with .Profile }}
 
       {{ if .Description }}
-      <p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
+        <p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
       {{ end }}
 
       <div class="hidden md:block">
···
         {{ end }}
         {{ if .IncludeBluesky }}
         <div class="flex items-center gap-2">
-          <span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white"
-            }}</span>
+          <span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white" }}</span>
           <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ $userIdent }}</a>
         </div>
         {{ end }}
         {{ range $link := .Links }}
-        {{ if $link }}
-        <div class="flex items-center gap-2">
-          <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
-          <a href="{{ $link }}">{{ $link }}</a>
-        </div>
-        {{ end }}
+          {{ if $link }}
+          <div class="flex items-center gap-2">
+            <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
+            <a href="{{ $link }}">{{ $link }}</a>
+          </div>
+          {{ end }}
         {{ end }}
         {{ if not $profile.IsStatsEmpty }}
         <div class="flex items-center justify-evenly gap-2 py-2">
           {{ range $stat := .Stats }}
-          {{ if $stat.Kind }}
-          <div class="flex flex-col items-center gap-2">
-            <span class="text-xl font-bold">{{ $stat.Value }}</span>
-            <span>{{ $stat.Kind.String }}</span>
-          </div>
-          {{ end }}
+            {{ if $stat.Kind }}
+              <div class="flex flex-col items-center gap-2">
+                <span class="text-xl font-bold">{{ $stat.Value }}</span>
+                <span>{{ $stat.Kind.String }}</span>
+              </div>
+            {{ end }}
           {{ end }}
         </div>
         {{ end }}
···
 
       <div class="flex mt-2 items-center gap-2">
         {{ if ne .FollowStatus.String "IsSelf" }}
-        {{ template "user/fragments/follow" . }}
+          {{ template "user/fragments/follow" . }}
         {{ else }}
-        <button id="editBtn" class="btn w-full flex items-center gap-2 group" hx-target="#profile-bio"
-          hx-get="/profile/edit-bio" hx-swap="innerHTML">
+        <button id="editBtn"
+          class="btn w-full flex items-center gap-2 group"
+          hx-target="#profile-bio"
+          hx-get="/profile/edit-bio"
+          hx-swap="innerHTML">
           {{ i "pencil" "w-4 h-4" }}
           edit
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

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"
···
   <div id="settings-emails-error" class="text-red-500 dark:text-red-400"></div>
   <div id="settings-emails-success" class="text-green-500 dark:text-green-400"></div>
 </form>
-{{ end }}
+{{ end }}

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"