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

Signed-off-by: Anirudh Oppiliappan <[e-mail]>

appview/db/timeline.go

···
 	// optional: populate only if event is Follow
 	*Profile
 	*FollowStats
+	*FollowStatus
+
+	// optional: populate only if event is Repo
+	IsStarred bool
+	StarCount int64
 }
 
 // TODO: this gathers heterogenous events from different sources and aggregates
 // them in code; if we did this entirely in sql, we could order and limit and paginate easily
-func MakeTimeline(e Execer, limit int) ([]TimelineEvent, error) {
+func MakeTimeline(e Execer, limit int, loggedInUserDid string) ([]TimelineEvent, error) {
 	var events []TimelineEvent
 
 	repos, err := getTimelineRepos(e, limit)
···
 		return nil, err
 	}
 
-	follows, err := getTimelineFollows(e, limit)
+	follows, err := getTimelineFollows(e, limit, loggedInUserDid)
 	if err != nil {
 		return nil, err
 	}
···
 	return events, nil
 }
 
-func getTimelineFollows(e Execer, limit int) ([]TimelineEvent, error) {
+func getTimelineFollows(e Execer, limit int, loggedInUserDid string) ([]TimelineEvent, error) {
 	follows, err := GetFollows(e, limit)
 	if err != nil {
 		return nil, err
···
 		profile, _ := profiles[f.SubjectDid]
 		followStatMap, _ := followStatMap[f.SubjectDid]
 
+		followStatus := IsNotFollowing
+		if followStatuses != nil {
+			followStatus = followStatuses[f.SubjectDid]
+		}
+
 		events = append(events, TimelineEvent{
-			Follow:      &f,
-			Profile:     profile,
-			FollowStats: &followStatMap,
-			EventAt:     f.FollowedAt,
+			Follow:       &f,
+			Profile:      profile,
+			FollowStats:  &followStatMap,
+			FollowStatus: &followStatus,
+			EventAt:      f.FollowedAt,
 		})
 	}
 

appview/pages/templates/timeline/fragments/timeline.html

···
                   {{ else if .Star }}
                     {{ template "timeline/fragments/starEvent" (list $ .Star) }}
                   {{ else if .Follow }}
-                    {{ template "timeline/fragments/followEvent" (list $ .Follow .Profile .FollowStats) }}
+                    {{ template "timeline/fragments/followEvent" (list $ .) }}
                   {{ end }}
                 </div>
               {{ end }}
···
 
 {{ define "timeline/fragments/followEvent" }}
   {{ $root := index . 0 }}
-  {{ $follow := index . 1 }}
-  {{ $profile := index . 2 }}
-  {{ $stat := index . 3 }}
+  {{ $event := index . 1 }}
+  {{ $follow := $event.Follow }}
+  {{ $profile := $event.Profile }}
+  {{ $stat := $event.FollowStats }}
 
   {{ $userHandle :=  resolve $follow.UserDid }}
   {{ $subjectHandle :=  resolve $follow.SubjectDid }}
···
       {{ template "user/fragments/picHandleLink" $subjectHandle }}
       <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $follow.FollowedAt }}</span>
   </div>
-  <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 alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />
-    </div>
+  <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">
+    <div class="flex items-center gap-4 flex-1">
+      <div class="flex-shrink-0 max-h-full w-24 h-24">
+        <img alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />
+      </div>
 
-    <div class="flex-1 min-h-0 justify-around flex flex-col">
-      <a href="/{{ $subjectHandle }}">
-        <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span>
-      </a>
-      {{ with $profile }}
-        {{ with .Description }}
-          <p class="text-sm pb-2 md:pb-2">{{.}}</p>
+      <div class="flex-1 min-h-0 justify-around flex flex-col">
+        <a href="/{{ $subjectHandle }}">
+          <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span>
+        </a>
+        {{ with $profile }}
+          {{ with .Description }}
+            <p class="text-sm pb-2 md:pb-2">{{.}}</p>
+          {{ end }}
+        {{ end }}
+        {{ with $stat }}
+          <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
+            <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
+            <span id="followers"><a href="/{{ $subjectHandle }}?tab=followers">{{ .Followers }} followers</a></span>
+            <span class="select-none after:content-['·']"></span>
+            <span id="following"><a href="/{{ $subjectHandle }}?tab=following">{{ .Following }} following</a></span>
+          </div>
         {{ end }}
-      {{ end }}
-      {{ with $stat }}
-        <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
-          <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
-          <span id="followers"><a href="/{{ $subjectHandle }}?tab=followers">{{ .Followers }} followers</a></span>
-          <span class="select-none after:content-['·']"></span>
-          <span id="following"><a href="/{{ $subjectHandle }}?tab=following">{{ .Following }} following</a></span>
-        </div>
-      {{ end }}
+      </div>
     </div>
+    
+    {{ if and $root.LoggedInUser (ne $event.FollowStatus.String "IsSelf") }}
+      <div class="flex-shrink-0 w-fit ml-auto">
+        {{ template "user/fragments/follow" (dict "UserDid" $follow.SubjectDid "FollowStatus" $event.FollowStatus) }}
+      </div>
+    {{ end }}
   </div>
 {{ end }}

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

···
 {{ define "user/fragments/follow" }}
   <button id="{{ normalizeForHtmlId .UserDid }}"
-    class="btn mt-2 w-full flex gap-2 items-center group"
+    class="btn mt-2 flex gap-2 items-center group"
 
     {{ if eq .FollowStatus.String "IsNotFollowing" }}
     hx-post="/follow?subject={{.UserDid}}"
···
     hx-target="#{{ normalizeForHtmlId .UserDid }}"
     hx-swap="outerHTML"
     >
-    {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}
+    {{ 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 }}
     {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
   </button>
 {{ end }}

appview/state/state.go

···
 func (s *State) Timeline(w http.ResponseWriter, r *http.Request) {
 	user := s.oauth.GetUser(r)
 
-	timeline, err := db.MakeTimeline(s.db, 50)
+	var userDid string
+	if user != nil {
+		userDid = user.Did
+	}
+	timeline, err := db.MakeTimeline(s.db, 50, userDid)
 	if err != nil {
 		log.Println(err)
 		s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.")
···
 }
 
 func (s *State) Home(w http.ResponseWriter, r *http.Request) {
-	timeline, err := db.MakeTimeline(s.db, 5)
+	timeline, err := db.MakeTimeline(s.db, 5, "")
 	if err != nil {
 		log.Println(err)
 		s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.")