From cbdbaf6d8e041c85c61aa4898966cee48d055dfa Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Wed, 13 Aug 2025 06:38:27 +0300
Subject: [PATCH] appview: implement follower and following pages for users
Change-Id: tlrutxlvkwovxvkutsnlykpyqtrprqso

- rename Followers/Following from ProfileCard to FollowersCount/FollowingCount
- in profileCard, define a single $userIdent to use instead of duplicating the didOrHandle expression

fixes https://tangled.sh/@tangled.sh/core/issues/169

Signed-off-by: dusk <y.bera003.06@protonmail.com>
---
 appview/pages/funcmap.go                      |   5 +
 appview/pages/pages.go                        |  37 ++++-
 appview/pages/templates/user/followers.html   |  30 ++++
 appview/pages/templates/user/following.html   |  30 ++++
 .../templates/user/fragments/follow.html      |   4 +-
 .../templates/user/fragments/followCard.html  |  22 +++
 .../templates/user/fragments/profileCard.html |  31 ++--
 appview/state/profile.go                      | 150 ++++++++++++++++--
 appview/state/router.go                       |   2 +
 appview/strings/strings.go                    |  14 +-
 10 files changed, 288 insertions(+), 37 deletions(-)
 create mode 100644 appview/pages/templates/user/followers.html
 create mode 100644 appview/pages/templates/user/following.html
 create mode 100644 appview/pages/templates/user/fragments/followCard.html

diff --git a/appview/pages/funcmap.go b/appview/pages/funcmap.go
index d28e261..e26c8c9 100644
--- a/appview/pages/funcmap.go
+++ b/appview/pages/funcmap.go
@@ -257,6 +257,11 @@ func (p *Pages) funcMap() template.FuncMap {
 		"layoutCenter": func() string {
 			return "col-span-1 md:col-span-8 lg:col-span-6"
 		},
+
+		"normalizeForHtmlId": func(s string) string {
+			// TODO: extend this to handle other cases?
+			return strings.ReplaceAll(s, ":", "_")
+		},
 	}
 }
 
diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index 0cd9b40..d84817d 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -413,11 +413,11 @@ type ProfilePageParams struct {
 }
 
 type ProfileCard struct {
-	UserDid      string
-	UserHandle   string
-	FollowStatus db.FollowStatus
-	Followers    int
-	Following    int
+	UserDid        string
+	UserHandle     string
+	FollowStatus   db.FollowStatus
+	FollowersCount int
+	FollowingCount int
 
 	Profile *db.Profile
 }
@@ -438,6 +438,33 @@ func (p *Pages) ReposPage(w io.Writer, params ReposPageParams) error {
 	return p.execute("user/repos", w, params)
 }
 
+type FollowCard struct {
+	UserDid      string
+	UserHandle   string
+	FollowStatus db.FollowStatus
+	Profile      *db.Profile
+}
+
+type FollowersPageParams struct {
+	LoggedInUser *oauth.User
+	Followers    []FollowCard
+	Card         ProfileCard
+}
+
+func (p *Pages) FollowersPage(w io.Writer, params FollowersPageParams) error {
+	return p.execute("user/followers", w, params)
+}
+
+type FollowingPageParams struct {
+	LoggedInUser *oauth.User
+	Following    []FollowCard
+	Card         ProfileCard
+}
+
+func (p *Pages) FollowingPage(w io.Writer, params FollowingPageParams) error {
+	return p.execute("user/following", w, params)
+}
+
 type FollowFragmentParams struct {
 	UserDid      string
 	FollowStatus db.FollowStatus
diff --git a/appview/pages/templates/user/followers.html b/appview/pages/templates/user/followers.html
new file mode 100644
index 0000000..95956d9
--- /dev/null
+++ b/appview/pages/templates/user/followers.html
@@ -0,0 +1,30 @@
+{{ define "title" }}{{ or .Card.UserHandle .Card.UserDid }} · repos {{ end }}
+
+{{ define "extrameta" }}
+    <meta property="og:title" content="{{ or .Card.UserHandle .Card.UserDid }}'s repos" />
+    <meta property="og:type" content="object" />
+    <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}/repos" />
+    <meta property="og:description" content="{{ or .Card.Profile.Description .Card.UserHandle .Card.UserDid }}" />
+{{ end }}
+
+{{ define "content" }}
+<div class="grid grid-cols-1 md:grid-cols-11 gap-4">
+    <div class="md:col-span-3 order-1 md:order-1">
+        {{ template "user/fragments/profileCard" .Card }}
+    </div>
+    <div id="all-repos" class="md:col-span-8 order-2 md:order-2">
+        {{ block "followers" . }}{{ end }}
+    </div>
+</div>
+{{ end }}
+
+{{ define "followers" }}
+  <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWERS</p>
+  <div id="repos" class="grid grid-cols-1 gap-4 mb-6">
+    {{ range .Followers }}
+       {{ template "user/fragments/followCard" . }}
+    {{ else }}
+        <p class="px-6 dark:text-white">This user does not have any followers yet.</p>
+    {{ end }}
+  </div>
+{{ end }}
diff --git a/appview/pages/templates/user/following.html b/appview/pages/templates/user/following.html
new file mode 100644
index 0000000..9280016
--- /dev/null
+++ b/appview/pages/templates/user/following.html
@@ -0,0 +1,30 @@
+{{ define "title" }}{{ or .Card.UserHandle .Card.UserDid }} · repos {{ end }}
+
+{{ define "extrameta" }}
+    <meta property="og:title" content="{{ or .Card.UserHandle .Card.UserDid }}'s repos" />
+    <meta property="og:type" content="object" />
+    <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}/repos" />
+    <meta property="og:description" content="{{ or .Card.Profile.Description .Card.UserHandle .Card.UserDid }}" />
+{{ end }}
+
+{{ define "content" }}
+<div class="grid grid-cols-1 md:grid-cols-11 gap-4">
+    <div class="md:col-span-3 order-1 md:order-1">
+        {{ template "user/fragments/profileCard" .Card }}
+    </div>
+    <div id="all-repos" class="md:col-span-8 order-2 md:order-2">
+        {{ block "following" . }}{{ end }}
+    </div>
+</div>
+{{ end }}
+
+{{ define "following" }}
+  <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWING</p>
+  <div id="repos" class="grid grid-cols-1 gap-4 mb-6">
+    {{ range .Following }}
+       {{ template "user/fragments/followCard" . }}
+    {{ else }}
+        <p class="px-6 dark:text-white">This user does not follow anyone yet.</p>
+    {{ end }}
+  </div>
+{{ end }}
diff --git a/appview/pages/templates/user/fragments/follow.html b/appview/pages/templates/user/fragments/follow.html
index b5c65b4..23fd3cd 100644
--- a/appview/pages/templates/user/fragments/follow.html
+++ b/appview/pages/templates/user/fragments/follow.html
@@ -1,5 +1,5 @@
 {{ define "user/fragments/follow" }}
-  <button id="followBtn"
+  <button id="{{ normalizeForHtmlId .UserDid }}"
     class="btn mt-2 w-full flex gap-2 items-center group"
 
     {{ if eq .FollowStatus.String "IsNotFollowing" }}
@@ -9,7 +9,7 @@
     {{ end }}
 
     hx-trigger="click"
-    hx-target="#followBtn"
+    hx-target="#{{ normalizeForHtmlId .UserDid }}"
     hx-swap="outerHTML"
     >
     {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}
diff --git a/appview/pages/templates/user/fragments/followCard.html b/appview/pages/templates/user/fragments/followCard.html
new file mode 100644
index 0000000..e714aa3
--- /dev/null
+++ b/appview/pages/templates/user/fragments/followCard.html
@@ -0,0 +1,22 @@
+{{ define "user/fragments/followCard" }}
+<div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm">
+  <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4">
+    <div class="flex-shrink-0 max-h-full w-24 h-24">
+      <img class="object-cover rounded-full p-2" src="{{ fullAvatar .UserHandle }}" />
+    </div>
+
+    <div class="flex-1 min-h-0 justify-around flex flex-col">
+      <a href="/{{ .UserHandle }}">
+        <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ .UserHandle | truncateAt30 }}</span>
+      </a>
+      <p class="text-sm pb-2 md:pb-2">{{.Profile.Description}}</p>
+    </div>
+    
+    {{ if ne .FollowStatus.String "IsSelf" }}
+      <div class="max-w-24">
+        {{ template "user/fragments/follow" . }}
+      </div>
+    {{ end }}
+  </div>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/appview/pages/templates/user/fragments/profileCard.html b/appview/pages/templates/user/fragments/profileCard.html
index 60d701f..8900864 100644
--- a/appview/pages/templates/user/fragments/profileCard.html
+++ b/appview/pages/templates/user/fragments/profileCard.html
@@ -1,4 +1,5 @@
 {{ define "user/fragments/profileCard" }}
+  {{ $userIdent := didOrHandle .UserDid .UserHandle }}
   <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm max-h-fit">
     <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">
@@ -8,15 +9,15 @@
       </div>
       <div class="col-span-2">
         <div class="flex items-center flex-row flex-nowrap gap-2">
-          <p title="{{ didOrHandle .UserDid .UserHandle }}"
+          <p title="{{ $userIdent }}"
           class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
-            {{ didOrHandle .UserDid .UserHandle }}
+            {{ $userIdent }}
           </p>
-          <a href="/{{ didOrHandle .UserDid .UserHandle }}/feed.atom">{{ i "rss" "size-4" }}</a>
+          <a href="/{{ $userIdent }}/feed.atom">{{ i "rss" "size-4" }}</a>
         </div>
 
         <div class="md:hidden">
-          {{ block "followerFollowing" (list .Followers .Following) }} {{ end }}
+          {{ block "followerFollowing" (list . $userIdent) }} {{ end }}
         </div>
       </div>
       <div class="col-span-3 md:col-span-full">
@@ -29,7 +30,7 @@
           {{ end }}
 
           <div class="hidden md:block">
-            {{ block "followerFollowing" (list $.Followers $.Following) }} {{ end }}
+            {{ block "followerFollowing" (list $ $userIdent) }} {{ end }}
           </div>
 
           <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> 
@@ -42,7 +43,7 @@
             {{ 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>
-              <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ didOrHandle $.UserDid $.UserHandle }}</a>
+              <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ $userIdent }}</a>
             </div>
             {{ end }}
             {{ range $link := .Links }}
@@ -88,13 +89,15 @@
 {{ end }}
 
 {{ define "followerFollowing" }}
-  {{ $followers := index . 0 }}
-  {{ $following := index . 1 }}
-  <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
-    <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
-    <span id="followers">{{ $followers }} followers</span>
-    <span class="select-none after:content-['·']"></span>
-    <span id="following">{{ $following }} following</span>
-  </div>
+  {{ $root := index . 0 }}
+  {{ $userIdent := index . 1 }}
+  {{ with $root }}
+    <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
+      <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
+      <span id="followers"><a href="/{{ $userIdent }}/followers">{{ .FollowersCount }} followers</a></span>
+      <span class="select-none after:content-['·']"></span>
+      <span id="following"><a href="/{{ $userIdent }}/following">{{ .FollowingCount }} following</a></span>
+    </div>
+  {{ end }}
 {{ end }}
 
diff --git a/appview/state/profile.go b/appview/state/profile.go
index 621d83a..d114f05 100644
--- a/appview/state/profile.go
+++ b/appview/state/profile.go
@@ -147,12 +147,12 @@ func (s *State) profilePage(w http.ResponseWriter, r *http.Request) {
 		CollaboratingRepos: pinnedCollaboratingRepos,
 		DidHandleMap:       didHandleMap,
 		Card: pages.ProfileCard{
-			UserDid:      ident.DID.String(),
-			UserHandle:   ident.Handle.String(),
-			Profile:      profile,
-			FollowStatus: followStatus,
-			Followers:    followers,
-			Following:    following,
+			UserDid:        ident.DID.String(),
+			UserHandle:     ident.Handle.String(),
+			Profile:        profile,
+			FollowStatus:   followStatus,
+			FollowersCount: followers,
+			FollowingCount: following,
 		},
 		Punchcard:       punchcard,
 		ProfileTimeline: timeline,
@@ -196,12 +196,144 @@ func (s *State) reposPage(w http.ResponseWriter, r *http.Request) {
 		Repos:        repos,
 		DidHandleMap: map[string]string{ident.DID.String(): ident.Handle.String()},
 		Card: pages.ProfileCard{
-			UserDid:      ident.DID.String(),
+			UserDid:        ident.DID.String(),
+			UserHandle:     ident.Handle.String(),
+			Profile:        profile,
+			FollowStatus:   followStatus,
+			FollowersCount: followers,
+			FollowingCount: following,
+		},
+	})
+}
+
+func (s *State) followersPage(w http.ResponseWriter, r *http.Request) {
+	ident, ok := r.Context().Value("resolvedId").(identity.Identity)
+	if !ok {
+		s.pages.Error404(w)
+		return
+	}
+
+	profile, err := db.GetProfile(s.db, ident.DID.String())
+	if err != nil {
+		log.Printf("getting profile data for %s: %s", ident.DID.String(), err)
+	}
+
+	loggedInUser := s.oauth.GetUser(r)
+
+	followers, err := db.GetFollowers(s.db, ident.DID.String())
+	if err != nil {
+		log.Printf("getting followers for %s: %s", ident.DID.String(), err)
+	}
+	followerCards := make([]pages.FollowCard, len(followers))
+	for i, follower := range followers {
+		ident, err := s.idResolver.ResolveIdent(r.Context(), follower.UserDid)
+		if err != nil {
+			log.Printf("can't resolve handle for %s: %s", follower.UserDid, err)
+			continue
+		}
+		profile, err := db.GetProfile(s.db, follower.UserDid)
+		if err != nil {
+			log.Printf("can't get profile for %s: %s", follower.UserDid, err)
+			continue
+		}
+		followStatus := db.IsNotFollowing
+		if loggedInUser != nil {
+			followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, follower.UserDid)
+		}
+		followerCards[i] = pages.FollowCard{
+			UserDid:      follower.UserDid,
 			UserHandle:   ident.Handle.String(),
+			FollowStatus: followStatus,
 			Profile:      profile,
+		}
+	}
+
+	followStatus := db.IsNotFollowing
+	if loggedInUser != nil {
+		followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, ident.DID.String())
+	}
+
+	followersCount, followingCount, err := db.GetFollowerFollowingCount(s.db, ident.DID.String())
+	if err != nil {
+		log.Printf("getting follow stats repos for %s: %s", ident.DID.String(), err)
+	}
+
+	s.pages.FollowersPage(w, pages.FollowersPageParams{
+		LoggedInUser: loggedInUser,
+		Followers:    followerCards,
+		Card: pages.ProfileCard{
+			UserDid:        ident.DID.String(),
+			UserHandle:     ident.Handle.String(),
+			Profile:        profile,
+			FollowStatus:   followStatus,
+			FollowersCount: followersCount,
+			FollowingCount: followingCount,
+		},
+	})
+}
+
+func (s *State) followingPage(w http.ResponseWriter, r *http.Request) {
+	ident, ok := r.Context().Value("resolvedId").(identity.Identity)
+	if !ok {
+		s.pages.Error404(w)
+		return
+	}
+
+	profile, err := db.GetProfile(s.db, ident.DID.String())
+	if err != nil {
+		log.Printf("getting profile data for %s: %s", ident.DID.String(), err)
+	}
+
+	loggedInUser := s.oauth.GetUser(r)
+
+	following, err := db.GetFollowing(s.db, ident.DID.String())
+	if err != nil {
+		log.Printf("getting following for %s: %s", ident.DID.String(), err)
+	}
+	followingCards := make([]pages.FollowCard, len(following))
+	for i, following := range following {
+		ident, err := s.idResolver.ResolveIdent(r.Context(), following.SubjectDid)
+		if err != nil {
+			log.Printf("can't resolve handle for %s: %s", following.SubjectDid, err)
+			continue
+		}
+		profile, err := db.GetProfile(s.db, following.SubjectDid)
+		if err != nil {
+			log.Printf("can't get profile for %s: %s", following.SubjectDid, err)
+			continue
+		}
+		followStatus := db.IsNotFollowing
+		if loggedInUser != nil {
+			followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, following.SubjectDid)
+		}
+		followingCards[i] = pages.FollowCard{
+			UserDid:      following.SubjectDid,
+			UserHandle:   ident.Handle.String(),
 			FollowStatus: followStatus,
-			Followers:    followers,
-			Following:    following,
+			Profile:      profile,
+		}
+	}
+
+	followStatus := db.IsNotFollowing
+	if loggedInUser != nil {
+		followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, ident.DID.String())
+	}
+
+	followersCount, followingCount, err := db.GetFollowerFollowingCount(s.db, ident.DID.String())
+	if err != nil {
+		log.Printf("getting follow stats repos for %s: %s", ident.DID.String(), err)
+	}
+
+	s.pages.FollowingPage(w, pages.FollowingPageParams{
+		LoggedInUser: loggedInUser,
+		Following:    followingCards,
+		Card: pages.ProfileCard{
+			UserDid:        ident.DID.String(),
+			UserHandle:     ident.Handle.String(),
+			Profile:        profile,
+			FollowStatus:   followStatus,
+			FollowersCount: followersCount,
+			FollowingCount: followingCount,
 		},
 	})
 }
diff --git a/appview/state/router.go b/appview/state/router.go
index 2e546a7..f1a21aa 100644
--- a/appview/state/router.go
+++ b/appview/state/router.go
@@ -70,6 +70,8 @@ func (s *State) UserRouter(mw *middleware.Middleware) http.Handler {
 
 	r.With(mw.ResolveIdent()).Route("/{user}", func(r chi.Router) {
 		r.Get("/", s.Profile)
+		r.Get("/followers", s.followersPage)
+		r.Get("/following", s.followingPage)
 		r.Get("/feed.atom", s.AtomFeedPage)
 
 		r.With(mw.ResolveRepo()).Route("/{repo}", func(r chi.Router) {
diff --git a/appview/strings/strings.go b/appview/strings/strings.go
index e211d64..44f0fc5 100644
--- a/appview/strings/strings.go
+++ b/appview/strings/strings.go
@@ -182,7 +182,7 @@ func (s *Strings) dashboard(w http.ResponseWriter, r *http.Request) {
 		followStatus = db.GetFollowStatus(s.Db, loggedInUser.Did, id.DID.String())
 	}
 
-	followers, following, err := db.GetFollowerFollowingCount(s.Db, id.DID.String())
+	followersCount, followingCount, err := db.GetFollowerFollowingCount(s.Db, id.DID.String())
 	if err != nil {
 		l.Error("failed to get follow stats", "err", err)
 	}
@@ -190,12 +190,12 @@ func (s *Strings) dashboard(w http.ResponseWriter, r *http.Request) {
 	s.Pages.StringsDashboard(w, pages.StringsDashboardParams{
 		LoggedInUser: s.OAuth.GetUser(r),
 		Card: pages.ProfileCard{
-			UserDid:      id.DID.String(),
-			UserHandle:   id.Handle.String(),
-			Profile:      profile,
-			FollowStatus: followStatus,
-			Followers:    followers,
-			Following:    following,
+			UserDid:        id.DID.String(),
+			UserHandle:     id.Handle.String(),
+			Profile:        profile,
+			FollowStatus:   followStatus,
+			FollowersCount: followersCount,
+			FollowingCount: followingCount,
 		},
 		Strings: all,
 	})
-- 
2.43.0