Add users search page

internal/webserver/handler_search.go

@@ -17,6 +17,8 @@ type SearchPageData struct {
 	SearchText       string
 	SortOrder        persistence.SortOrder
 	SortOrderOptions []string
+	IsUsersSearch    bool
+	UsersList        []scraper.User
 	// TODO: fill out the search text in the search bar as well (needs modifying the base template)
 }
 
@@ -44,6 +46,14 @@ func (t SearchPageData) FocusedTweetID() scraper.TweetID {
 	return scraper.TweetID(0)
 }
 
+func (app *Application) SearchUsers(w http.ResponseWriter, r *http.Request) {
+	ret := NewSearchPageData()
+	ret.IsUsersSearch = true
+	ret.SearchText = strings.Trim(r.URL.Path, "/")
+	ret.UsersList = app.Profile.SearchUsers(ret.SearchText)
+	app.buffered_render_tweet_page(w, "tpl/search.tpl", ret)
+}
+
 func (app *Application) Search(w http.ResponseWriter, r *http.Request) {
 	app.traceLog.Printf("'Search' handler (path: %q)", r.URL.Path)
 
@@ -60,6 +70,12 @@ func (app *Application) Search(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// Handle users search
+	if r.URL.Query().Get("type") == "users" {
+		app.SearchUsers(w, r)
+		return
+	}
+
 	// Handle "@username"
 	if search_text[0] == '@' {
 		http.Redirect(w, r, fmt.Sprintf("/%s", search_text[1:]), 302)

internal/webserver/static/styles.css

@@ -222,7 +222,10 @@ h3 {
 .user-feed-header .profile-image {
     width: 8em;
 }
-.user-feed-header a.user-feed-tab {
+.tabs-container {
+    outline: 1px solid var(--color-outline-gray);
+}
+.tabs-container a.tab {
     flex-grow: 1;
     text-align: center;
     font-size: 1.1em;
@@ -230,11 +233,11 @@ h3 {
     color: var(--color-twitter-text-gray);
     padding: 0.8em;
 }
-.user-feed-header a.user-feed-tab.active-tab {
+.tabs-container a.tab.active-tab {
     color: var(--color-twitter-blue);
     border-bottom: 0.2em solid var(--color-twitter-blue);
 }
-.user-feed-header a.user-feed-tab:hover {
+.tabs-container a.tab:hover {
     color: var(--color-twitter-blue);
 }
 
@@ -348,7 +351,6 @@ ul.quick-links {
 }
 .user-feed-header-info-container {
     padding: 2em;
-    margin-bottom: 0.1em;
     border-bottom: 1px solid var(--color-outline-gray);
 }
 .timeline .tweet, .quoted-tweet .tweet {
@@ -600,9 +602,30 @@ ul.dropdown-items {
 .users-list-container {
     display: flex;
     flex-direction: column;
-    gap: 1em;
-    padding: 1em;
 }
 .users-list-container .author-info .profile-image {
     width: 4em;
 }
+.users-list-container .user {
+    border-color: var(--color-twitter-off-white-dark);
+    border-bottom-style: solid;
+    border-width: 1px;
+    padding: 1em;
+}
+.users-list-container .user p.bio {
+    margin: 0 5.3em;
+    font-size: 0.9em;
+    color: var(--color-twitter-text-gray);
+}
+.sort-order-container {
+    padding: 1em 1em 1em 3em;
+    margin-bottom: -0.5em;
+    border-bottom: 1px solid var(--color-outline-gray);
+}
+.sort-order-container select {
+    text-transform: capitalize;
+    margin: 0 1em;
+}
+.sort-order-container .sort-order-label {
+    font-weight: bold;
+}

internal/webserver/tpl/includes/list.tpl

@@ -0,0 +1,10 @@
+{{define "list"}}
+  <div class="users-list-container">
+    {{range .}}
+      <div class="user">
+        {{template "author-info" .}}
+        <p class="bio">{{.Bio}}</p>
+      </div>
+    {{end}}
+  </div>
+{{end}}

internal/webserver/tpl/list.tpl

@@ -1,9 +1,5 @@
 {{define "title"}}Followed Users{{end}}
 
 {{define "main"}}
-<div class="users-list-container">
+  {{template "list" .}}
-  {{range .}}
-    {{template "author-info" .}}
-  {{end}}
-</div>
 {{end}}

internal/webserver/tpl/search.tpl

@@ -2,13 +2,36 @@
 
 {{define "main"}}
   <div class="search-header">
-    <h2>Search results: {{.SearchText}}</h2>
+    <h2 style="text-align: center">Search results: {{.SearchText}}</h2>
-    <select name="sort-order" style="text-transform: capitalize;" hx-get="#" hx-target="body" hx-push-url="true">
+
+    <div class="row tabs-container">
+      <a
+        class="tab unstyled-link {{if (not .IsUsersSearch)}}active-tab{{end}}"
+        href="?type=tweets"
+      >
+        <span class="tab-inner">Tweets</span>
+      </a>
+      <a
+        class="tab unstyled-link {{if .IsUsersSearch}}active-tab{{end}}"
+        href="?type=users"
+      >
+        <span class="tab-inner">Users</span>
+      </a>
+    </div>
+  </div>
+  {{if .IsUsersSearch}}
+    {{template "list" .UsersList}}
+  {{else}}
+    <div class="sort-order-container">
+      <span class="sort-order-label">order:</span>
+      <select name="sort-order" hx-get="#" hx-target="body" hx-push-url="true">
         {{range .SortOrderOptions}}
           <option
             value="{{.}}"
-          {{if (eq ($.SortOrder.String) .)}} selected {{end}}
             style="text-transform: capitalize;"
+            {{if (eq ($.SortOrder.String) .)}}
+              selected
+            {{end}}
           >{{.}}</option>
         {{end}}
       </select>
@@ -17,3 +40,4 @@
       {{template "timeline" .}}
     </div>
   {{end}}
+{{end}}

internal/webserver/tpl/user_feed.tpl

@@ -58,18 +58,18 @@
       </div>
     </div>
 
-    <div class="row user-feed-tabs-container">
+    <div class="row tabs-container">
-      <a class="user-feed-tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">
+      <a class="tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">
-        <span class="user-feed-tab-inner">Tweets and replies</span>
+        <span class="tab-inner">Tweets and replies</span>
       </a>
-      <a class="user-feed-tab unstyled-link {{if (eq .FeedType "without_replies")}}active-tab{{end}}" href="/{{$user.Handle}}/without_replies">
+      <a class="tab unstyled-link {{if (eq .FeedType "without_replies")}}active-tab{{end}}" href="/{{$user.Handle}}/without_replies">
-        <span class="user-feed-tab-inner">Tweets</span>
+        <span class="tab-inner">Tweets</span>
       </a>
-      <a class="user-feed-tab unstyled-link {{if (eq .FeedType "media")}}active-tab{{end}}" href="/{{$user.Handle}}/media">
+      <a class="tab unstyled-link {{if (eq .FeedType "media")}}active-tab{{end}}" href="/{{$user.Handle}}/media">
-        <span class="user-feed-tab-inner">Media</span>
+        <span class="tab-inner">Media</span>
       </a>
-      <a class="user-feed-tab unstyled-link {{if (eq .FeedType "likes")}}active-tab{{end}}" href="/{{$user.Handle}}/likes">
+      <a class="tab unstyled-link {{if (eq .FeedType "likes")}}active-tab{{end}}" href="/{{$user.Handle}}/likes">
-        <span class="user-feed-tab-inner">Likes</span>
+        <span class="tab-inner">Likes</span>
       </a>
     </div>
   </div>