appview: implement follower and following pages for users #484

+2 -7

appview/db/profile.go

··· 348 348 return tx.Commit() 349 349 } 350 350 351 351 - func GetProfiles(e Execer, filters ...filter) ([]Profile, error) { 351 351 + func GetProfiles(e Execer, filters ...filter) (map[string]*Profile, error) { 352 352 var conditions []string 353 353 var args []any 354 354 for _, filter := range filters { ··· 448 448 idxs[did] = idx + 1 449 449 } 450 450 451 451 - var profiles []Profile 452 452 - for _, p := range profileMap { 453 453 - profiles = append(profiles, *p) 454 454 - } 455 455 - 456 456 - return profiles, nil 451 451 + return profileMap, nil 457 452 } 458 453 459 454 func GetProfile(e Execer, did string) (*Profile, error) {

+2 -6

appview/db/timeline.go

··· 151 151 return nil, nil 152 152 } 153 153 154 154 - profileMap := make(map[string]Profile) 155 154 profiles, err := GetProfiles(e, FilterIn("did", subjects)) 156 155 if err != nil { 157 156 return nil, err 158 157 } 159 159 - for _, p := range profiles { 160 160 - profileMap[p.Did] = p 161 161 - } 162 158 163 159 followStatMap := make(map[string]FollowStats) 164 160 for _, s := range subjects { ··· 174 170 175 171 var events []TimelineEvent 176 172 for _, f := range follows { 177 177 - profile, _ := profileMap[f.SubjectDid] 173 173 + profile, _ := profiles[f.SubjectDid] 178 174 followStatMap, _ := followStatMap[f.SubjectDid] 179 175 180 176 events = append(events, TimelineEvent{ 181 177 Follow: &f, 182 182 - Profile: &profile, 178 178 + Profile: profile, 183 179 FollowStats: &followStatMap, 184 180 EventAt: f.FollowedAt, 185 181 })

+5

appview/pages/funcmap.go

··· 277 277 "layoutCenter": func() string { 278 278 return "col-span-1 md:col-span-8 lg:col-span-6" 279 279 }, 280 280 + 281 281 + "normalizeForHtmlId": func(s string) string { 282 282 + // TODO: extend this to handle other cases? 283 283 + return strings.ReplaceAll(s, ":", "_") 284 284 + }, 280 285 } 281 286 } 282 287

+33 -5

appview/pages/pages.go

··· 417 417 } 418 418 419 419 type ProfileCard struct { 420 420 - UserDid string 421 421 - UserHandle string 422 422 - FollowStatus db.FollowStatus 423 423 - Followers int 424 424 - Following int 420 420 + UserDid string 421 421 + UserHandle string 422 422 + FollowStatus db.FollowStatus 423 423 + FollowersCount int 424 424 + FollowingCount int 425 425 426 426 Profile *db.Profile 427 427 } ··· 440 440 return p.execute("user/repos", w, params) 441 441 } 442 442 443 443 + type FollowCard struct { 444 444 + UserDid string 445 445 + FollowStatus db.FollowStatus 446 446 + FollowersCount int 447 447 + FollowingCount int 448 448 + Profile *db.Profile 449 449 + } 450 450 + 451 451 + type FollowersPageParams struct { 452 452 + LoggedInUser *oauth.User 453 453 + Followers []FollowCard 454 454 + Card ProfileCard 455 455 + } 456 456 + 457 457 + func (p *Pages) FollowersPage(w io.Writer, params FollowersPageParams) error { 458 458 + return p.execute("user/followers", w, params) 459 459 + } 460 460 + 461 461 + type FollowingPageParams struct { 462 462 + LoggedInUser *oauth.User 463 463 + Following []FollowCard 464 464 + Card ProfileCard 465 465 + } 466 466 + 467 467 + func (p *Pages) FollowingPage(w io.Writer, params FollowingPageParams) error { 468 468 + return p.execute("user/following", w, params) 469 469 + } 470 470 + 443 471 type FollowFragmentParams struct { 444 472 UserDid string 445 473 FollowStatus db.FollowStatus

+3 -3

appview/pages/templates/timeline.html

··· 150 150 {{ end }} 151 151 {{ end }} 152 152 {{ with $stat }} 153 153 - <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm"> 153 153 + <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> 154 154 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> 155 155 - <span id="followers">{{ .Followers }} followers</span> 155 155 + <span id="followers"><a href="/{{ $subjectHandle }}?tab=followers">{{ .Followers }} followers</a></span> 156 156 <span class="select-none after:content-['·']"></span> 157 157 - <span id="following">{{ .Following }} following</span> 157 157 + <span id="following"><a href="/{{ $subjectHandle }}?tab=following">{{ .Following }} following</a></span> 158 158 </div> 159 159 {{ end }} 160 160 </div>

+30

appview/pages/templates/user/followers.html

··· 1 1 + {{ define "title" }}{{ or .Card.UserHandle .Card.UserDid }} · followers {{ end }} 2 2 + 3 3 + {{ define "extrameta" }} 4 4 + <meta property="og:title" content="{{ or .Card.UserHandle .Card.UserDid }}'s followers" /> 5 5 + <meta property="og:type" content="object" /> 6 6 + <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}?tab=followers" /> 7 7 + <meta property="og:description" content="{{ or .Card.Profile.Description .Card.UserHandle .Card.UserDid }}" /> 8 8 + {{ end }} 9 9 + 10 10 + {{ define "content" }} 11 11 + <div class="grid grid-cols-1 md:grid-cols-11 gap-4"> 12 12 + <div class="md:col-span-3 order-1 md:order-1"> 13 13 + {{ template "user/fragments/profileCard" .Card }} 14 14 + </div> 15 15 + <div id="all-followers" class="md:col-span-8 order-2 md:order-2"> 16 16 + {{ block "followers" . }}{{ end }} 17 17 + </div> 18 18 + </div> 19 19 + {{ end }} 20 20 + 21 21 + {{ define "followers" }} 22 22 + <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWERS</p> 23 23 + <div id="followers" class="grid grid-cols-1 gap-4 mb-6"> 24 24 + {{ range .Followers }} 25 25 + {{ template "user/fragments/followCard" . }} 26 26 + {{ else }} 27 27 + <p class="px-6 dark:text-white">This user does not have any followers yet.</p> 28 28 + {{ end }} 29 29 + </div> 30 30 + {{ end }}

+30

appview/pages/templates/user/following.html

··· 1 1 + {{ define "title" }}{{ or .Card.UserHandle .Card.UserDid }} · following {{ end }} 2 2 + 3 3 + {{ define "extrameta" }} 4 4 + <meta property="og:title" content="{{ or .Card.UserHandle .Card.UserDid }}'s following" /> 5 5 + <meta property="og:type" content="object" /> 6 6 + <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}?tab=following" /> 7 7 + <meta property="og:description" content="{{ or .Card.Profile.Description .Card.UserHandle .Card.UserDid }}" /> 8 8 + {{ end }} 9 9 + 10 10 + {{ define "content" }} 11 11 + <div class="grid grid-cols-1 md:grid-cols-11 gap-4"> 12 12 + <div class="md:col-span-3 order-1 md:order-1"> 13 13 + {{ template "user/fragments/profileCard" .Card }} 14 14 + </div> 15 15 + <div id="all-following" class="md:col-span-8 order-2 md:order-2"> 16 16 + {{ block "following" . }}{{ end }} 17 17 + </div> 18 18 + </div> 19 19 + {{ end }} 20 20 + 21 21 + {{ define "following" }} 22 22 + <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWING</p> 23 23 + <div id="following" class="grid grid-cols-1 gap-4 mb-6"> 24 24 + {{ range .Following }} 25 25 + {{ template "user/fragments/followCard" . }} 26 26 + {{ else }} 27 27 + <p class="px-6 dark:text-white">This user does not follow anyone yet.</p> 28 28 + {{ end }} 29 29 + </div> 30 30 + {{ end }}

+2 -2

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

··· 1 1 {{ define "user/fragments/follow" }} 2 2 - <button id="followBtn" 2 2 + <button id="{{ normalizeForHtmlId .UserDid }}" 3 3 class="btn mt-2 w-full flex gap-2 items-center group" 4 4 5 5 {{ if eq .FollowStatus.String "IsNotFollowing" }} ··· 9 9 {{ end }} 10 10 11 11 hx-trigger="click" 12 12 - hx-target="#followBtn" 12 12 + hx-target="#{{ normalizeForHtmlId .UserDid }}" 13 13 hx-swap="outerHTML" 14 14 > 15 15 {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}

+29

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

··· 1 1 + {{ define "user/fragments/followCard" }} 2 2 + {{ $userIdent := resolve .UserDid }} 3 3 + <div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm"> 4 4 + <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4"> 5 5 + <div class="flex-shrink-0 max-h-full w-24 h-24"> 6 6 + <img class="object-cover rounded-full p-2" src="{{ fullAvatar $userIdent }}" /> 7 7 + </div> 8 8 + 9 9 + <div class="flex-1 min-h-0 justify-around flex flex-col"> 10 10 + <a href="/{{ $userIdent }}"> 11 11 + <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $userIdent | truncateAt30 }}</span> 12 12 + </a> 13 13 + <p class="text-sm pb-2 md:pb-2">{{.Profile.Description}}</p> 14 14 + <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> 15 15 + <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> 16 16 + <span id="followers"><a href="/{{ $userIdent }}?tab=followers">{{ .FollowersCount }} followers</a></span> 17 17 + <span class="select-none after:content-['·']"></span> 18 18 + <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ .FollowingCount }} following</a></span> 19 19 + </div> 20 20 + </div> 21 21 + 22 22 + {{ if ne .FollowStatus.String "IsSelf" }} 23 23 + <div class="max-w-24"> 24 24 + {{ template "user/fragments/follow" . }} 25 25 + </div> 26 26 + {{ end }} 27 27 + </div> 28 28 + </div> 29 29 + {{ end }}

+17 -14

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

··· 1 1 {{ define "user/fragments/profileCard" }} 2 2 + {{ $userIdent := didOrHandle .UserDid .UserHandle }} 2 3 <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm max-h-fit"> 3 4 <div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center"> 4 5 <div id="avatar" class="col-span-1 flex justify-center items-center"> ··· 8 9 </div> 9 10 <div class="col-span-2"> 10 11 <div class="flex items-center flex-row flex-nowrap gap-2"> 11 11 - <p title="{{ didOrHandle .UserDid .UserHandle }}" 12 12 + <p title="{{ $userIdent }}" 12 13 class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"> 13 13 - {{ didOrHandle .UserDid .UserHandle }} 14 14 + {{ $userIdent }} 14 15 </p> 15 15 - <a href="/{{ didOrHandle .UserDid .UserHandle }}/feed.atom">{{ i "rss" "size-4" }}</a> 16 16 + <a href="/{{ $userIdent }}/feed.atom">{{ i "rss" "size-4" }}</a> 16 17 </div> 17 18 18 19 <div class="md:hidden"> 19 19 - {{ block "followerFollowing" (list .Followers .Following) }} {{ end }} 20 20 + {{ block "followerFollowing" (list . $userIdent) }} {{ end }} 20 21 </div> 21 22 </div> 22 23 <div class="col-span-3 md:col-span-full"> ··· 29 30 {{ end }} 30 31 31 32 <div class="hidden md:block"> 32 32 - {{ block "followerFollowing" (list $.Followers $.Following) }} {{ end }} 33 33 + {{ block "followerFollowing" (list $ $userIdent) }} {{ end }} 33 34 </div> 34 35 35 36 <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> ··· 42 43 {{ if .IncludeBluesky }} 43 44 <div class="flex items-center gap-2"> 44 45 <span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white" }}</span> 45 45 - <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ didOrHandle $.UserDid $.UserHandle }}</a> 46 46 + <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ $userIdent }}</a> 46 47 </div> 47 48 {{ end }} 48 49 {{ range $link := .Links }} ··· 88 89 {{ end }} 89 90 90 91 {{ define "followerFollowing" }} 91 91 - {{ $followers := index . 0 }} 92 92 - {{ $following := index . 1 }} 93 93 - <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm"> 94 94 - <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> 95 95 - <span id="followers">{{ $followers }} followers</span> 96 96 - <span class="select-none after:content-['·']"></span> 97 97 - <span id="following">{{ $following }} following</span> 98 98 - </div> 92 92 + {{ $root := index . 0 }} 93 93 + {{ $userIdent := index . 1 }} 94 94 + {{ with $root }} 95 95 + <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm"> 96 96 + <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> 97 97 + <span id="followers"><a href="/{{ $userIdent }}?tab=followers">{{ .FollowersCount }} followers</a></span> 98 98 + <span class="select-none after:content-['·']"></span> 99 99 + <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ .FollowingCount }} following</a></span> 100 100 + </div> 101 101 + {{ end }} 99 102 {{ end }} 100 103

+1 -1

appview/pages/templates/user/repos.html

··· 3 3 {{ define "extrameta" }} 4 4 <meta property="og:title" content="{{ or .Card.UserHandle .Card.UserDid }}'s repos" /> 5 5 <meta property="og:type" content="object" /> 6 6 - <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}/repos" /> 6 6 + <meta property="og:url" content="https://tangled.sh/{{ or .Card.UserHandle .Card.UserDid }}?tab=repos" /> 7 7 <meta property="og:description" content="{{ or .Card.Profile.Description .Card.UserHandle .Card.UserDid }}" /> 8 8 {{ end }} 9 9

+146 -12

appview/state/profile.go

··· 17 17 "github.com/gorilla/feeds" 18 18 "tangled.sh/tangled.sh/core/api/tangled" 19 19 "tangled.sh/tangled.sh/core/appview/db" 20 20 + "tangled.sh/tangled.sh/core/appview/oauth" 20 21 "tangled.sh/tangled.sh/core/appview/pages" 21 22 ) 22 23 ··· 27 28 s.profilePage(w, r) 28 29 case "repos": 29 30 s.reposPage(w, r) 31 31 + case "followers": 32 32 + s.followersPage(w, r) 33 33 + case "following": 34 34 + s.followingPage(w, r) 30 35 } 31 36 } 32 37 ··· 117 122 Repos: pinnedRepos, 118 123 CollaboratingRepos: pinnedCollaboratingRepos, 119 124 Card: pages.ProfileCard{ 120 120 - UserDid: ident.DID.String(), 121 121 - UserHandle: ident.Handle.String(), 122 122 - Profile: profile, 123 123 - FollowStatus: followStatus, 124 124 - Followers: followers, 125 125 - Following: following, 125 125 + UserDid: ident.DID.String(), 126 126 + UserHandle: ident.Handle.String(), 127 127 + Profile: profile, 128 128 + FollowStatus: followStatus, 129 129 + FollowersCount: followers, 130 130 + FollowingCount: following, 126 131 }, 127 132 Punchcard: punchcard, 128 133 ProfileTimeline: timeline, ··· 165 170 LoggedInUser: loggedInUser, 166 171 Repos: repos, 167 172 Card: pages.ProfileCard{ 168 168 - UserDid: ident.DID.String(), 169 169 - UserHandle: ident.Handle.String(), 170 170 - Profile: profile, 171 171 - FollowStatus: followStatus, 172 172 - Followers: followers, 173 173 - Following: following, 173 173 + UserDid: ident.DID.String(), 174 174 + UserHandle: ident.Handle.String(), 175 175 + Profile: profile, 176 176 + FollowStatus: followStatus, 177 177 + FollowersCount: followers, 178 178 + FollowingCount: following, 174 179 }, 175 180 }) 176 181 } 177 182 183 183 + type FollowsPageParams struct { 184 184 + LoggedInUser *oauth.User 185 185 + Follows []pages.FollowCard 186 186 + Card pages.ProfileCard 187 187 + } 188 188 + 189 189 + func (s *State) followPage(w http.ResponseWriter, r *http.Request, fetchFollows func(db.Execer, string) ([]db.Follow, error), extractDid func(db.Follow) string) *FollowsPageParams { 190 190 + ident, ok := r.Context().Value("resolvedId").(identity.Identity) 191 191 + if !ok { 192 192 + s.pages.Error404(w) 193 193 + return nil 194 194 + } 195 195 + did := ident.DID.String() 196 196 + 197 197 + profile, err := db.GetProfile(s.db, did) 198 198 + if err != nil { 199 199 + log.Printf("getting profile data for %s: %s", did, err) 200 200 + } 201 201 + 202 202 + loggedInUser := s.oauth.GetUser(r) 203 203 + 204 204 + follows, err := fetchFollows(s.db, did) 205 205 + if err != nil { 206 206 + log.Printf("getting followers for %s: %s", did, err) 207 207 + } 208 208 + 209 209 + if len(follows) == 0 { 210 210 + return nil 211 211 + } 212 212 + 213 213 + followDids := make([]string, 0, len(follows)) 214 214 + for _, follow := range follows { 215 215 + followDids = append(followDids, extractDid(follow)) 216 216 + } 217 217 + 218 218 + profiles, err := db.GetProfiles(s.db, db.FilterIn("did", followDids)) 219 219 + if err != nil { 220 220 + log.Printf("getting profile for %s: %s", followDids, err) 221 221 + return nil 222 222 + } 223 223 + 224 224 + var loggedInUserFollowing map[string]struct{} 225 225 + if loggedInUser != nil { 226 226 + following, err := db.GetFollowing(s.db, loggedInUser.Did) 227 227 + if err != nil { 228 228 + return nil 229 229 + } 230 230 + if len(following) > 0 { 231 231 + loggedInUserFollowing = make(map[string]struct{}, len(following)) 232 232 + for _, follow := range following { 233 233 + loggedInUserFollowing[follow.SubjectDid] = struct{}{} 234 234 + } 235 235 + } 236 236 + } 237 237 + 238 238 + followCards := make([]pages.FollowCard, 0, len(follows)) 239 239 + for _, did := range followDids { 240 240 + followersCount, followingCount, err := db.GetFollowerFollowingCount(s.db, did) 241 241 + if err != nil { 242 242 + log.Printf("getting follow stats for %s: %s", did, err) 243 243 + } 244 244 + followStatus := db.IsNotFollowing 245 245 + if loggedInUserFollowing != nil { 246 246 + if _, exists := loggedInUserFollowing[did]; exists { 247 247 + followStatus = db.IsFollowing 248 248 + } else if loggedInUser.Did == did { 249 249 + followStatus = db.IsSelf 250 250 + } 251 251 + } 252 252 + var profile *db.Profile 253 253 + if p, exists := profiles[did]; exists { 254 254 + profile = p 255 255 + } else { 256 256 + profile = &db.Profile{} 257 257 + profile.Did = did 258 258 + } 259 259 + followCards = append(followCards, pages.FollowCard{ 260 260 + UserDid: did, 261 261 + FollowStatus: followStatus, 262 262 + FollowersCount: followersCount, 263 263 + FollowingCount: followingCount, 264 264 + Profile: profile, 265 265 + }) 266 266 + } 267 267 + 268 268 + followStatus := db.IsNotFollowing 269 269 + if loggedInUser != nil { 270 270 + followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, did) 271 271 + } 272 272 + 273 273 + followersCount, followingCount, err := db.GetFollowerFollowingCount(s.db, did) 274 274 + if err != nil { 275 275 + log.Printf("getting follow stats followers for %s: %s", did, err) 276 276 + } 277 277 + 278 278 + return &FollowsPageParams{ 279 279 + LoggedInUser: loggedInUser, 280 280 + Follows: followCards, 281 281 + Card: pages.ProfileCard{ 282 282 + UserDid: did, 283 283 + UserHandle: ident.Handle.String(), 284 284 + Profile: profile, 285 285 + FollowStatus: followStatus, 286 286 + FollowersCount: followersCount, 287 287 + FollowingCount: followingCount, 288 288 + }, 289 289 + } 290 290 + } 291 291 + 292 292 + func (s *State) followersPage(w http.ResponseWriter, r *http.Request) { 293 293 + followPage := s.followPage(w, r, db.GetFollowers, func(f db.Follow) string { return f.UserDid }) 294 294 + 295 295 + s.pages.FollowersPage(w, pages.FollowersPageParams{ 296 296 + LoggedInUser: followPage.LoggedInUser, 297 297 + Followers: followPage.Follows, 298 298 + Card: followPage.Card, 299 299 + }) 300 300 + } 301 301 + 302 302 + func (s *State) followingPage(w http.ResponseWriter, r *http.Request) { 303 303 + followPage := s.followPage(w, r, db.GetFollowing, func(f db.Follow) string { return f.SubjectDid }) 304 304 + 305 305 + s.pages.FollowingPage(w, pages.FollowingPageParams{ 306 306 + LoggedInUser: followPage.LoggedInUser, 307 307 + Following: followPage.Follows, 308 308 + Card: followPage.Card, 309 309 + }) 310 310 + } 311 311 + 178 312 func (s *State) feedFromRequest(w http.ResponseWriter, r *http.Request) *feeds.Feed { 179 313 ident, ok := r.Context().Value("resolvedId").(identity.Identity) 180 314 if !ok {

+7 -7

appview/strings/strings.go

··· 203 203 followStatus = db.GetFollowStatus(s.Db, loggedInUser.Did, id.DID.String()) 204 204 } 205 205 206 206 - followers, following, err := db.GetFollowerFollowingCount(s.Db, id.DID.String()) 206 206 + followersCount, followingCount, err := db.GetFollowerFollowingCount(s.Db, id.DID.String()) 207 207 if err != nil { 208 208 l.Error("failed to get follow stats", "err", err) 209 209 } ··· 211 211 s.Pages.StringsDashboard(w, pages.StringsDashboardParams{ 212 212 LoggedInUser: s.OAuth.GetUser(r), 213 213 Card: pages.ProfileCard{ 214 214 - UserDid: id.DID.String(), 215 215 - UserHandle: id.Handle.String(), 216 216 - Profile: profile, 217 217 - FollowStatus: followStatus, 218 218 - Followers: followers, 219 219 - Following: following, 214 214 + UserDid: id.DID.String(), 215 215 + UserHandle: id.Handle.String(), 216 216 + Profile: profile, 217 217 + FollowStatus: followStatus, 218 218 + FollowersCount: followersCount, 219 219 + FollowingCount: followingCount, 220 220 }, 221 221 Strings: all, 222 222 })