diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index fda155644a..051a44d958 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -655,6 +655,10 @@ change_avatar = Change your avatar…
joined_on = Joined on %s
repositories = Repositories
activity = Public activity
+followers.title.one = Follower
+followers.title.few = Followers
+following.title.one = Following
+following.title.few = Following
followers_one = %d follower
followers_few = %d followers
following_one = %d following
diff --git a/routers/web/user/profile.go b/routers/web/user/profile.go
index 64ce93b6cf..a83d7f7333 100644
--- a/routers/web/user/profile.go
+++ b/routers/web/user/profile.go
@@ -183,9 +183,11 @@ func prepareUserProfileTabData(ctx *context.Context, showPrivate bool, profileDb
case "followers":
ctx.Data["Cards"] = followers
total = int(numFollowers)
+ ctx.Data["CardsTitle"] = ctx.TrN(total, "user.followers.title.one", "user.followers.title.few")
case "following":
ctx.Data["Cards"] = following
total = int(numFollowing)
+ ctx.Data["CardsTitle"] = ctx.TrN(total, "user.following.title.one", "user.following.title.few")
case "activity":
date := ctx.FormString("date")
pagingNum = setting.UI.FeedPagingNum
diff --git a/templates/repo/user_cards.tmpl b/templates/repo/user_cards.tmpl
index 5accc2c7af..9061b17715 100644
--- a/templates/repo/user_cards.tmpl
+++ b/templates/repo/user_cards.tmpl
@@ -1,8 +1,8 @@
{{if .CardsTitle}}
-
+
+ {{.CardsTitle}}
+
{{end}}
{{range .Cards}}
diff --git a/tests/integration/user_profile_follows_test.go b/tests/integration/user_profile_follows_test.go
new file mode 100644
index 0000000000..bad0944d88
--- /dev/null
+++ b/tests/integration/user_profile_follows_test.go
@@ -0,0 +1,132 @@
+// Copyright 2024 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package integration
+
+import (
+ "fmt"
+ "net/http"
+ "net/url"
+ "strings"
+ "testing"
+
+ "github.com/stretchr/testify/assert"
+)
+
+// TestUserProfileFollows is a test for user following counters, pages and titles.
+// It tests that:
+// - Followers and Following tabs always have titles present and always use correct plurals
+// - Followers and Following lists have correct amounts of items
+// - %d followers and %following counters are always present and always have correct numbers and use correct plurals
+func TestUserProfileFollows(t *testing.T) {
+ onGiteaRun(t, func(t *testing.T, giteaURL *url.URL) {
+ // This test needs 3 users to check for all possible states
+ // The accounts of user3 and user4 are not functioning
+ user1 := loginUser(t, "user1")
+ user2 := loginUser(t, "user2")
+ user5 := loginUser(t, "user5")
+
+ followersLink := "#profile-avatar-card a[href='/user1?tab=followers']"
+ followingLink := "#profile-avatar-card a[href='/user1?tab=following']"
+ listHeader := ".user-cards h2"
+ listItems := ".user-cards .list"
+
+ // = No follows =
+
+ var followCount int
+
+ // Request the profile of user1, the Followers tab
+ response := user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=followers"), http.StatusOK)
+ page := NewHTMLParser(t, response.Body)
+
+ // Verify that user1 has no followers
+ testSelectorEquals(t, page, followersLink, "0 followers")
+ testSelectorEquals(t, page, listHeader, "Followers")
+ testListCount(t, page, listItems, followCount)
+
+ // Request the profile of user1, the Following tab
+ response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=following"), http.StatusOK)
+ page = NewHTMLParser(t, response.Body)
+
+ // Verify that user1 does not follow anyone
+ testSelectorEquals(t, page, followingLink, "0 following")
+ testSelectorEquals(t, page, listHeader, "Following")
+ testListCount(t, page, listItems, followCount)
+
+ // Make user1 and user2 follow each other
+ testUserFollowUser(t, user1, "user2")
+ testUserFollowUser(t, user2, "user1")
+
+ // = 1 follow each =
+
+ followCount++
+
+ // Request the profile of user1, the Followers tab
+ response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=followers"), http.StatusOK)
+ page = NewHTMLParser(t, response.Body)
+
+ // Verify it is now followed by 1 user
+ testSelectorEquals(t, page, followersLink, "1 follower")
+ testSelectorEquals(t, page, listHeader, "Follower")
+ testListCount(t, page, listItems, followCount)
+
+ // Request the profile of user1, the Following tab
+ response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=following"), http.StatusOK)
+ page = NewHTMLParser(t, response.Body)
+
+ // Verify it now follows follows 1 user
+ testSelectorEquals(t, page, followingLink, "1 following")
+ testSelectorEquals(t, page, listHeader, "Following")
+ testListCount(t, page, listItems, followCount)
+
+ // Make user1 and user3 follow each other
+ testUserFollowUser(t, user1, "user5")
+ testUserFollowUser(t, user5, "user1")
+
+ // = 2 follows =
+
+ followCount++
+
+ // Request the profile of user1, the Followers tab
+ response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=followers"), http.StatusOK)
+ page = NewHTMLParser(t, response.Body)
+
+ // Verify it is now followed by 2 users
+ testSelectorEquals(t, page, followersLink, "2 followers")
+ testSelectorEquals(t, page, listHeader, "Followers")
+ testListCount(t, page, listItems, followCount)
+
+ // Request the profile of user1, the Following tab
+ response = user1.MakeRequest(t, NewRequest(t, "GET", "/user1?tab=following"), http.StatusOK)
+ page = NewHTMLParser(t, response.Body)
+
+ // Verify it now follows follows 2 users
+ testSelectorEquals(t, page, followingLink, "2 following")
+ testSelectorEquals(t, page, listHeader, "Following")
+ testListCount(t, page, listItems, followCount)
+ })
+}
+
+// testUserFollowUser simply follows a user `following` by session of user `follower`
+func testUserFollowUser(t *testing.T, follower *TestSession, following string) {
+ t.Helper()
+ follower.MakeRequest(t, NewRequestWithValues(t, "POST", fmt.Sprintf("/%s?action=follow", following),
+ map[string]string{
+ "_csrf": GetCSRF(t, follower, fmt.Sprintf("/%s", following)),
+ }), http.StatusOK)
+}
+
+// testSelectorEquals prevents duplication of a lot of code for tests with many checks
+func testSelectorEquals(t *testing.T, page *HTMLDoc, selector, expectedContent string) {
+ t.Helper()
+ element := page.Find(selector)
+ content := strings.TrimSpace(element.Text())
+ assert.Equal(t, expectedContent, content)
+}
+
+// testListCount checks that the list on the page has the right amount of items
+func testListCount(t *testing.T, page *HTMLDoc, selector string, expectedCount int) {
+ t.Helper()
+ itemCount := page.Find(selector).Children().Length()
+ assert.Equal(t, expectedCount, itemCount)
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index af27a66005..4ca8148fb4 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2106,7 +2106,7 @@ td .commit-summary {
padding: 0;
display: flex;
flex-wrap: wrap;
- margin-bottom: 10px;
+ margin: 10px 0;
}
.user-cards .list .item {