Update the list of watchers and stargazers when clicking watch/unwatch or star/unstar

routers/web/repo/repo.go

@@ -352,6 +352,9 @@ func Action(ctx *context.Context) {
 		ctx.Data["IsStaringRepo"] = repo_model.IsStaring(ctx, ctx.Doer.ID, ctx.Repo.Repository.ID)
 	}
 
+	// see the `hx-trigger="refreshUserCards ..."` comments in tmpl
+	ctx.RespHeader().Add("hx-trigger", "refreshUserCards")
+
 	switch ctx.PathParam(":action") {
 	case "watch", "unwatch", "star", "unstar":
 		// we have to reload the repository because NumStars or NumWatching (used in the templates) has just changed

routers/web/repo/view.go

@@ -1123,8 +1123,6 @@ func RenderUserCards(ctx *context.Context, total int, getter func(opts db.ListOp
 func Watchers(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.watchers")
 	ctx.Data["CardsTitle"] = ctx.Tr("repo.watchers")
-	ctx.Data["PageIsWatchers"] = true
-
 	RenderUserCards(ctx, ctx.Repo.Repository.NumWatches, func(opts db.ListOptions) ([]*user_model.User, error) {
 		return repo_model.GetRepoWatchers(ctx, ctx.Repo.Repository.ID, opts)
 	}, tplWatchers)
@@ -1134,7 +1132,6 @@ func Watchers(ctx *context.Context) {
 func Stars(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.stargazers")
 	ctx.Data["CardsTitle"] = ctx.Tr("repo.stargazers")
-	ctx.Data["PageIsStargazers"] = true
 	RenderUserCards(ctx, ctx.Repo.Repository.NumStars, func(opts db.ListOptions) ([]*user_model.User, error) {
 		return repo_model.GetStargazers(ctx, ctx.Repo.Repository, opts)
 	}, tplWatchers)

templates/repo/user_cards.tmpl

@@ -1,4 +1,14 @@
-<div class="user-cards">
+<!-- Refresh the content if a htmx response contains "HX-Trigger" header.
+This usually happens when a user stays on the watchers/stargazers page
+when they watched/unwatched/starred/unstarred and the list should be refreshed.
+To test go to the watchers page and click the watch button. The user cards should reload.
+At the moment, no JS initialization would re-trigger (fortunately there is no JS for this page).
+-->
+<div class="no-loading-indicator tw-hidden"></div>
+<div class="user-cards"
+		hx-trigger="refreshUserCards from:body" hx-indicator=".no-loading-indicator"
+		hx-get="{{$.CurrentURL}}" hx-swap="outerHTML" hx-select=".user-cards"
+>
 	{{if .CardsTitle}}
 	<h2 class="ui dividing header">
 		{{.CardsTitle}}