Make Followers/Followees pages show the user header at the top

- also make the followees/followers count indicators in a user header link to their respective pages

internal/webserver/handler_lists.go

@@ -8,6 +8,8 @@ import (
 
 type ListData struct {
 	Title         string
+	HeaderUserID  scraper.UserID
+	HeaderTweetID scraper.TweetID
 	UserIDs       []scraper.UserID
 }
 

internal/webserver/handler_user_feed.go

@@ -116,11 +116,13 @@ func (app *Application) UserFollowees(w http.ResponseWriter, r *http.Request, us
 	data, trove := NewListData(app.Profile.GetFollowees(user.ID))
 	trove.Users[user.ID] = user // Not loaded otherwise; needed to profile image in the login button on the sidebar
 	data.Title = fmt.Sprintf("Followed by @%s", user.Handle)
+	data.HeaderUserID = user.ID
 	app.buffered_render_page(w, "tpl/list.tpl", PageGlobalData{TweetTrove: trove}, data)
 }
 func (app *Application) UserFollowers(w http.ResponseWriter, r *http.Request, user scraper.User) {
 	data, trove := NewListData(app.Profile.GetFollowers(user.ID))
 	trove.Users[user.ID] = user
 	data.Title = fmt.Sprintf("@%s's followers", user.Handle)
+	data.HeaderUserID = user.ID
 	app.buffered_render_page(w, "tpl/list.tpl", PageGlobalData{TweetTrove: trove}, data)
 }

internal/webserver/static/styles.css

@@ -216,14 +216,14 @@ h3 {
     border: 1px solid var(--color-outline-gray);
 }
 
-.user-feed-header {
+.user-header {
     border-bottom: 1px solid var(--color-outline-gray);
 }
-.user-feed-header .author-info {
+.user-header .author-info {
     font-size: 1.3em;
     padding: 1em;
 }
-.user-feed-header .profile-image {
+.user-header .profile-image {
     width: 8em;
     height: 8em;
 }
@@ -354,7 +354,7 @@ ul.quick-links {
     align-items: center;
     gap: 0.3em;
 }
-.user-feed-header-info-container {
+.user-header-info-container {
     padding: 2em;
     border-bottom: 1px solid var(--color-outline-gray);
 }

internal/webserver/tpl/includes/user_header.tpl

@@ -0,0 +1,59 @@
+{{define "user-header"}}
+  <div class="user-header">
+    {{if .BannerImageLocalPath}}
+      {{if .IsContentDownloaded}}
+        <img class="profile-banner-image" src="/content/profile_images/{{.BannerImageLocalPath}}" />
+      {{else}}
+        <img class="profile-banner-image" src="{{.BannerImageUrl}}" />
+      {{end}}
+    {{end}}
+
+    <div class="user-header-info-container">
+      <div class="row">
+        {{template "author-info" .}}
+        {{template "following-button" .}}
+      </div>
+      <div class="user-bio">
+        {{template "text-with-entities" .Bio}}
+      </div>
+      {{if .Location}}
+        <div class="user-location bio-info-with-icon">
+          <img class="svg-icon" src="/static/icons/location.svg" />
+          <span>{{.Location}}</span>
+        </div>
+      {{end}}
+      {{if .Website}}
+        <div class="user-website bio-info-with-icon">
+          <img class="svg-icon" src="/static/icons/website.svg" />
+          <a class="unstyled-link" target="_blank" href="{{.Website}}">{{.Website}}</a>
+        </div>
+      {{end}}
+      <div class="user-join-date bio-info-with-icon">
+        <img class="svg-icon" src="/static/icons/calendar.svg" />
+        <span>{{.JoinDate.Time.Format "Jan 2, 2006"}}</span>
+      </div>
+
+      <div class="followers-followees-container row">
+        <a href="/{{.Handle}}/followers" class="followers-container unstyled-link">
+          <span class="followers-count">{{.FollowersCount}}</span>
+          <span class="followers-label">followers</span>
+        </a>
+        <a href="/{{.Handle}}/followees" class="followers-container unstyled-link">
+          <span class="following-label">is following</span>
+          <span class="following-count">{{.FollowingCount}}</span>
+        </a>
+
+        <div class="spacer"></div>
+
+        <div class="user-feed-buttons-container">
+          <a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com">
+            <img class="svg-icon" src="/static/icons/external-link.svg" />
+          </a>
+          <a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" title="Refresh">
+            <img class="svg-icon" src="/static/icons/refresh.svg" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+{{end}}

internal/webserver/tpl/list.tpl

@@ -1,5 +1,15 @@
 {{define "title"}}{{.Title}}{{end}}
 
 {{define "main"}}
+  {{if .HeaderUserID}}
+    {{template "user-header" (user .HeaderUserID)}}
+  {{else if .HeaderTweetID}}
+    {{template "tweet" (tweet .HeaderTweetID)}}
+  {{end}}
+
+  <h3>
+    {{.Title}}
+  </h3>
+
   {{template "list" .UserIDs}}
 {{end}}

internal/webserver/tpl/user_feed.tpl

@@ -3,61 +3,7 @@
 {{define "main"}}
   {{$user := (user .UserID)}}
   <div class="user-feed-header">
-    {{if $user.BannerImageLocalPath}}
+    {{template "user-header" $user}}
-      {{if $user.IsContentDownloaded}}
-        <img class="profile-banner-image" src="/content/profile_images/{{$user.BannerImageLocalPath}}" />
-      {{else}}
-        <img class="profile-banner-image" src="{{$user.BannerImageUrl}}" />
-      {{end}}
-    {{end}}
-
-    <div class="user-feed-header-info-container">
-      <div class="row">
-        {{template "author-info" $user}}
-        {{template "following-button" $user}}
-      </div>
-      <div class="user-bio">
-        {{template "text-with-entities" $user.Bio}}
-      </div>
-      {{if $user.Location}}
-        <div class="user-location bio-info-with-icon">
-          <img class="svg-icon" src="/static/icons/location.svg" />
-          <span>{{$user.Location}}</span>
-        </div>
-      {{end}}
-      {{if $user.Website}}
-        <div class="user-website bio-info-with-icon">
-          <img class="svg-icon" src="/static/icons/website.svg" />
-          <a class="unstyled-link" target="_blank" href="{{$user.Website}}">{{$user.Website}}</a>
-        </div>
-      {{end}}
-      <div class="user-join-date bio-info-with-icon">
-        <img class="svg-icon" src="/static/icons/calendar.svg" />
-        <span>{{$user.JoinDate.Time.Format "Jan 2, 2006"}}</span>
-      </div>
-
-      <div class="followers-followees-container row">
-        <a href="/{{$user.Handle}}/followers" class="followers-container unstyled-link">
-          <span class="followers-count">{{$user.FollowersCount}}</span>
-          <span class="followers-label">followers</span>
-        </a>
-        <a href="/{{$user.Handle}}/followees" class="followers-container unstyled-link">
-          <span class="following-label">is following</span>
-          <span class="following-count">{{$user.FollowingCount}}</span>
-        </a>
-
-        <div class="spacer"></div>
-
-        <div class="user-feed-buttons-container">
-          <a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{$user.Handle}}" title="Open on twitter.com">
-            <img class="svg-icon" src="/static/icons/external-link.svg" />
-          </a>
-          <a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" title="Refresh">
-            <img class="svg-icon" src="/static/icons/refresh.svg" />
-          </a>
-        </div>
-      </div>
-    </div>
 
     <div class="row tabs-container">
       <a class="tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">