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

··· 271 271 "layoutCenter": func() string { 272 272 return "col-span-1 md:col-span-8 lg:col-span-6" 273 273 }, 274 274 + 275 275 + "normalizeForHtmlId": func(s string) string { 276 276 + // TODO: extend this to handle other cases? 277 277 + return strings.ReplaceAll(s, ":", "_") 278 278 + }, 274 279 } 275 280 } 276 281

+33 -5

appview/pages/pages.go

··· 411 411 } 412 412 413 413 type ProfileCard struct { 414 414 - UserDid string 415 415 - UserHandle string 416 416 - FollowStatus db.FollowStatus 417 417 - Followers int 418 418 - Following int 414 414 + UserDid string 415 415 + UserHandle string 416 416 + FollowStatus db.FollowStatus 417 417 + FollowersCount int 418 418 + FollowingCount int 419 419 420 420 Profile *db.Profile 421 421 } ··· 434 434 return p.execute("user/repos", w, params) 435 435 } 436 436 437 437 + type FollowCard struct { 438 438 + UserDid string 439 439 + FollowStatus db.FollowStatus 440 440 + FollowersCount int 441 441 + FollowingCount int 442 442 + Profile *db.Profile 443 443 + } 444 444 + 445 445 + type FollowersPageParams struct { 446 446 + LoggedInUser *oauth.User 447 447 + Followers []FollowCard 448 448 + Card ProfileCard 449 449 + } 450 450 + 451 451 + func (p *Pages) FollowersPage(w io.Writer, params FollowersPageParams) error { 452 452 + return p.execute("user/followers", w, params) 453 453 + } 454 454 + 455 455 + type FollowingPageParams struct { 456 456 + LoggedInUser *oauth.User 457 457 + Following []FollowCard 458 458 + Card ProfileCard 459 459 + } 460 460 + 461 461 + func (p *Pages) FollowingPage(w io.Writer, params FollowingPageParams) error { 462 462 + return p.execute("user/following", w, params) 463 463 + } 464 464 + 437 465 type FollowFragmentParams struct { 438 466 UserDid string 439 467 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 ··· 136 141 Repos: pinnedRepos, 137 142 CollaboratingRepos: pinnedCollaboratingRepos, 138 143 Card: pages.ProfileCard{ 139 139 - UserDid: ident.DID.String(), 140 140 - UserHandle: ident.Handle.String(), 141 141 - Profile: profile, 142 142 - FollowStatus: followStatus, 143 143 - Followers: followers, 144 144 - Following: following, 144 144 + UserDid: ident.DID.String(), 145 145 + UserHandle: ident.Handle.String(), 146 146 + Profile: profile, 147 147 + FollowStatus: followStatus, 148 148 + FollowersCount: followers, 149 149 + FollowingCount: following, 145 150 }, 146 151 Punchcard: punchcard, 147 152 ProfileTimeline: timeline, ··· 184 189 LoggedInUser: loggedInUser, 185 190 Repos: repos, 186 191 Card: pages.ProfileCard{ 187 187 - UserDid: ident.DID.String(), 188 188 - UserHandle: ident.Handle.String(), 189 189 - Profile: profile, 190 190 - FollowStatus: followStatus, 191 191 - Followers: followers, 192 192 - Following: following, 192 192 + UserDid: ident.DID.String(), 193 193 + UserHandle: ident.Handle.String(), 194 194 + Profile: profile, 195 195 + FollowStatus: followStatus, 196 196 + FollowersCount: followers, 197 197 + FollowingCount: following, 193 198 }, 194 199 }) 195 200 } 196 201 202 202 + type FollowsPageParams struct { 203 203 + LoggedInUser *oauth.User 204 204 + Follows []pages.FollowCard 205 205 + Card pages.ProfileCard 206 206 + } 207 207 + 208 208 + func (s *State) followPage(w http.ResponseWriter, r *http.Request, fetchFollows func(db.Execer, string) ([]db.Follow, error), extractDid func(db.Follow) string) *FollowsPageParams { 209 209 + ident, ok := r.Context().Value("resolvedId").(identity.Identity) 210 210 + if !ok { 211 211 + s.pages.Error404(w) 212 212 + return nil 213 213 + } 214 214 + did := ident.DID.String() 215 215 + 216 216 + profile, err := db.GetProfile(s.db, did) 217 217 + if err != nil { 218 218 + log.Printf("getting profile data for %s: %s", did, err) 219 219 + } 220 220 + 221 221 + loggedInUser := s.oauth.GetUser(r) 222 222 + 223 223 + follows, err := fetchFollows(s.db, did) 224 224 + if err != nil { 225 225 + log.Printf("getting followers for %s: %s", did, err) 226 226 + } 227 227 + 228 228 + if len(follows) == 0 { 229 229 + return nil 230 230 + } 231 231 + 232 232 + followDids := make([]string, 0, len(follows)) 233 233 + for _, follow := range follows { 234 234 + followDids = append(followDids, extractDid(follow)) 235 235 + } 236 236 + 237 237 + profiles, err := db.GetProfiles(s.db, db.FilterIn("did", followDids)) 238 238 + if err != nil { 239 239 + log.Printf("getting profile for %s: %s", followDids, err) 240 240 + return nil 241 241 + } 242 242 + 243 243 + var loggedInUserFollowing map[string]struct{} 244 244 + if loggedInUser != nil { 245 245 + following, err := db.GetFollowing(s.db, loggedInUser.Did) 246 246 + if err != nil { 247 247 + return nil 248 248 + } 249 249 + if len(following) > 0 { 250 250 + loggedInUserFollowing = make(map[string]struct{}, len(following)) 251 251 + for _, follow := range following { 252 252 + loggedInUserFollowing[follow.SubjectDid] = struct{}{} 253 253 + } 254 254 + } 255 255 + } 256 256 + 257 257 + followCards := make([]pages.FollowCard, 0, len(follows)) 258 258 + for _, did := range followDids { 259 259 + followersCount, followingCount, err := db.GetFollowerFollowingCount(s.db, did) 260 260 + if err != nil { 261 261 + log.Printf("getting follow stats for %s: %s", did, err) 262 262 + } 263 263 + followStatus := db.IsNotFollowing 264 264 + if loggedInUserFollowing != nil { 265 265 + if _, exists := loggedInUserFollowing[did]; exists { 266 266 + followStatus = db.IsFollowing 267 267 + } else if loggedInUser.Did == did { 268 268 + followStatus = db.IsSelf 269 269 + } 270 270 + } 271 271 + var profile *db.Profile 272 272 + if p, exists := profiles[did]; exists { 273 273 + profile = p 274 274 + } else { 275 275 + profile = &db.Profile{} 276 276 + profile.Did = did 277 277 + } 278 278 + followCards = append(followCards, pages.FollowCard{ 279 279 + UserDid: did, 280 280 + FollowStatus: followStatus, 281 281 + FollowersCount: followersCount, 282 282 + FollowingCount: followingCount, 283 283 + Profile: profile, 284 284 + }) 285 285 + } 286 286 + 287 287 + followStatus := db.IsNotFollowing 288 288 + if loggedInUser != nil { 289 289 + followStatus = db.GetFollowStatus(s.db, loggedInUser.Did, did) 290 290 + } 291 291 + 292 292 + followersCount, followingCount, err := db.GetFollowerFollowingCount(s.db, did) 293 293 + if err != nil { 294 294 + log.Printf("getting follow stats followers for %s: %s", did, err) 295 295 + } 296 296 + 297 297 + return &FollowsPageParams{ 298 298 + LoggedInUser: loggedInUser, 299 299 + Follows: followCards, 300 300 + Card: pages.ProfileCard{ 301 301 + UserDid: did, 302 302 + UserHandle: ident.Handle.String(), 303 303 + Profile: profile, 304 304 + FollowStatus: followStatus, 305 305 + FollowersCount: followersCount, 306 306 + FollowingCount: followingCount, 307 307 + }, 308 308 + } 309 309 + } 310 310 + 311 311 + func (s *State) followersPage(w http.ResponseWriter, r *http.Request) { 312 312 + followPage := s.followPage(w, r, db.GetFollowers, func(f db.Follow) string { return f.UserDid }) 313 313 + 314 314 + s.pages.FollowersPage(w, pages.FollowersPageParams{ 315 315 + LoggedInUser: followPage.LoggedInUser, 316 316 + Followers: followPage.Follows, 317 317 + Card: followPage.Card, 318 318 + }) 319 319 + } 320 320 + 321 321 + func (s *State) followingPage(w http.ResponseWriter, r *http.Request) { 322 322 + followPage := s.followPage(w, r, db.GetFollowing, func(f db.Follow) string { return f.SubjectDid }) 323 323 + 324 324 + s.pages.FollowingPage(w, pages.FollowingPageParams{ 325 325 + LoggedInUser: followPage.LoggedInUser, 326 326 + Following: followPage.Follows, 327 327 + Card: followPage.Card, 328 328 + }) 329 329 + } 330 330 + 197 331 func (s *State) feedFromRequest(w http.ResponseWriter, r *http.Request) *feeds.Feed { 198 332 ident, ok := r.Context().Value("resolvedId").(identity.Identity) 199 333 if !ok {

+7 -7

appview/strings/strings.go

··· 182 182 followStatus = db.GetFollowStatus(s.Db, loggedInUser.Did, id.DID.String()) 183 183 } 184 184 185 185 - followers, following, err := db.GetFollowerFollowingCount(s.Db, id.DID.String()) 185 185 + followersCount, followingCount, err := db.GetFollowerFollowingCount(s.Db, id.DID.String()) 186 186 if err != nil { 187 187 l.Error("failed to get follow stats", "err", err) 188 188 } ··· 190 190 s.Pages.StringsDashboard(w, pages.StringsDashboardParams{ 191 191 LoggedInUser: s.OAuth.GetUser(r), 192 192 Card: pages.ProfileCard{ 193 193 - UserDid: id.DID.String(), 194 194 - UserHandle: id.Handle.String(), 195 195 - Profile: profile, 196 196 - FollowStatus: followStatus, 197 197 - Followers: followers, 198 198 - Following: following, 193 193 + UserDid: id.DID.String(), 194 194 + UserHandle: id.Handle.String(), 195 195 + Profile: profile, 196 196 + FollowStatus: followStatus, 197 197 + FollowersCount: followersCount, 198 198 + FollowingCount: followingCount, 199 199 }, 200 200 Strings: all, 201 201 })