lewis.moe / tangled-core
Monorepo for Tangled
fork atom

appview/{pages,db}: show follow/unfollow button on the timeline

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>

authored by

Anirudh Oppiliappan and committed by
Tangled 04314f77 4202ffcc

+59 -35
unified split
+18 -7
appview/db/timeline.go
··· 18 18 // optional: populate only if event is Follow 19 19 *Profile 20 20 *FollowStats 21 + *FollowStatus 22 + 23 + // optional: populate only if event is Repo 24 + IsStarred bool 25 + StarCount int64 21 26 } 22 27 23 28 // TODO: this gathers heterogenous events from different sources and aggregates 24 29 // them in code; if we did this entirely in sql, we could order and limit and paginate easily 25 - func MakeTimeline(e Execer, limit int) ([]TimelineEvent, error) { 30 + func MakeTimeline(e Execer, limit int, loggedInUserDid string) ([]TimelineEvent, error) { 26 31 var events []TimelineEvent 27 32 28 33 repos, err := getTimelineRepos(e, limit) ··· 35 40 return nil, err 36 41 } 37 42 38 - follows, err := getTimelineFollows(e, limit) 43 + follows, err := getTimelineFollows(e, limit, loggedInUserDid) 39 44 if err != nil { 40 45 return nil, err 41 46 } ··· 129 134 return events, nil 130 135 } 131 136 132 - func getTimelineFollows(e Execer, limit int) ([]TimelineEvent, error) { 137 + func getTimelineFollows(e Execer, limit int, loggedInUserDid string) ([]TimelineEvent, error) { 133 138 follows, err := GetFollows(e, limit) 134 139 if err != nil { 135 140 return nil, err ··· 159 164 profile, _ := profiles[f.SubjectDid] 160 165 followStatMap, _ := followStatMap[f.SubjectDid] 161 166 167 + followStatus := IsNotFollowing 168 + if followStatuses != nil { 169 + followStatus = followStatuses[f.SubjectDid] 170 + } 171 + 162 172 events = append(events, TimelineEvent{ 163 - Follow: &f, 164 - Profile: profile, 165 - FollowStats: &followStatMap, 166 - EventAt: f.FollowedAt, 173 + Follow: &f, 174 + Profile: profile, 175 + FollowStats: &followStatMap, 176 + FollowStatus: &followStatus, 177 + EventAt: f.FollowedAt, 167 178 }) 168 179 } 169 180
+33 -24
appview/pages/templates/timeline/fragments/timeline.html
··· 17 17 {{ else if .Star }} 18 18 {{ template "timeline/fragments/starEvent" (list $ .Star) }} 19 19 {{ else if .Follow }} 20 - {{ template "timeline/fragments/followEvent" (list $ .Follow .Profile .FollowStats) }} 20 + {{ template "timeline/fragments/followEvent" (list $ .) }} 21 21 {{ end }} 22 22 </div> 23 23 {{ end }} ··· 77 77 78 78 {{ define "timeline/fragments/followEvent" }} 79 79 {{ $root := index . 0 }} 80 - {{ $follow := index . 1 }} 81 - {{ $profile := index . 2 }} 82 - {{ $stat := index . 3 }} 80 + {{ $event := index . 1 }} 81 + {{ $follow := $event.Follow }} 82 + {{ $profile := $event.Profile }} 83 + {{ $stat := $event.FollowStats }} 83 84 84 85 {{ $userHandle := resolve $follow.UserDid }} 85 86 {{ $subjectHandle := resolve $follow.SubjectDid }} ··· 89 90 {{ template "user/fragments/picHandleLink" $subjectHandle }} 90 91 <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $follow.FollowedAt }}</span> 91 92 </div> 92 - <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4"> 93 - <div class="flex-shrink-0 max-h-full w-24 h-24"> 94 - <img alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" /> 95 - </div> 93 + <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex flex-col md:flex-row md:items-center gap-4"> 94 + <div class="flex items-center gap-4 flex-1"> 95 + <div class="flex-shrink-0 max-h-full w-24 h-24"> 96 + <img alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" /> 97 + </div> 96 98 97 - <div class="flex-1 min-h-0 justify-around flex flex-col"> 98 - <a href="/{{ $subjectHandle }}"> 99 - <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span> 100 - </a> 101 - {{ with $profile }} 102 - {{ with .Description }} 103 - <p class="text-sm pb-2 md:pb-2">{{.}}</p> 99 + <div class="flex-1 min-h-0 justify-around flex flex-col"> 100 + <a href="/{{ $subjectHandle }}"> 101 + <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span> 102 + </a> 103 + {{ with $profile }} 104 + {{ with .Description }} 105 + <p class="text-sm pb-2 md:pb-2">{{.}}</p> 106 + {{ end }} 107 + {{ end }} 108 + {{ with $stat }} 109 + <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> 110 + <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> 111 + <span id="followers"><a href="/{{ $subjectHandle }}?tab=followers">{{ .Followers }} followers</a></span> 112 + <span class="select-none after:content-['·']"></span> 113 + <span id="following"><a href="/{{ $subjectHandle }}?tab=following">{{ .Following }} following</a></span> 114 + </div> 104 115 {{ end }} 105 - {{ end }} 106 - {{ with $stat }} 107 - <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> 108 - <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> 109 - <span id="followers"><a href="/{{ $subjectHandle }}?tab=followers">{{ .Followers }} followers</a></span> 110 - <span class="select-none after:content-['·']"></span> 111 - <span id="following"><a href="/{{ $subjectHandle }}?tab=following">{{ .Following }} following</a></span> 112 - </div> 113 - {{ end }} 116 + </div> 114 117 </div> 118 + 119 + {{ if and $root.LoggedInUser (ne $event.FollowStatus.String "IsSelf") }} 120 + <div class="flex-shrink-0 w-fit ml-auto"> 121 + {{ template "user/fragments/follow" (dict "UserDid" $follow.SubjectDid "FollowStatus" $event.FollowStatus) }} 122 + </div> 123 + {{ end }} 115 124 </div> 116 125 {{ end }}
+2 -2
appview/pages/templates/user/fragments/follow.html
··· 1 1 {{ define "user/fragments/follow" }} 2 2 <button id="{{ normalizeForHtmlId .UserDid }}" 3 - class="btn mt-2 w-full flex gap-2 items-center group" 3 + class="btn mt-2 flex gap-2 items-center group" 4 4 5 5 {{ if eq .FollowStatus.String "IsNotFollowing" }} 6 6 hx-post="/follow?subject={{.UserDid}}" ··· 12 12 hx-target="#{{ normalizeForHtmlId .UserDid }}" 13 13 hx-swap="outerHTML" 14 14 > 15 - {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }} 15 + {{ if eq .FollowStatus.String "IsNotFollowing" }}{{ i "user-round-plus" "w-4 h-4" }} follow{{ else }}{{ i "user-round-minus" "w-4 h-4" }} unfollow{{ end }} 16 16 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 17 17 </button> 18 18 {{ end }}
+6 -2
appview/state/state.go
··· 211 211 func (s *State) Timeline(w http.ResponseWriter, r *http.Request) { 212 212 user := s.oauth.GetUser(r) 213 213 214 - timeline, err := db.MakeTimeline(s.db, 50) 214 + var userDid string 215 + if user != nil { 216 + userDid = user.Did 217 + } 218 + timeline, err := db.MakeTimeline(s.db, 50, userDid) 215 219 if err != nil { 216 220 log.Println(err) 217 221 s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.") ··· 266 270 } 267 271 268 272 func (s *State) Home(w http.ResponseWriter, r *http.Request) { 269 - timeline, err := db.MakeTimeline(s.db, 5) 273 + timeline, err := db.MakeTimeline(s.db, 5, "") 270 274 if err != nil { 271 275 log.Println(err) 272 276 s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.")