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)
 	}
 
+	// if we have user cards on the page we should refresh them
+	ctx.RespHeader().Add("HX-Trigger", "refreshCards")
+
 	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

@@ -65,6 +65,7 @@ const (
 	tplRepoHome     base.TplName = "repo/home"
 	tplRepoViewList base.TplName = "repo/view_list"
 	tplWatchers     base.TplName = "repo/watchers"
+	tplCards        base.TplName = "repo/user_cards"
 	tplForks        base.TplName = "repo/forks"
 	tplMigrating    base.TplName = "repo/migrate/migrating"
 )
@@ -1122,25 +1123,42 @@ func RenderUserCards(ctx *context.Context, total int, getter func(opts db.ListOp
 	ctx.HTML(http.StatusOK, tpl)
 }
 
+func renderUserList(ctx *context.Context, pageType string, total int, getter func(opts db.ListOptions) ([]*user_model.User, error), tpl base.TplName) {
+	ctx.Data["Title"] = ctx.Tr(pageType)
+	ctx.Data["CardsTitle"] = ctx.Tr(pageType)
+	RenderUserCards(ctx, total, getter, tpl)
+}
+
 // Watchers render repository's watch users
 func Watchers(ctx *context.Context) {
-	ctx.Data["Title"] = ctx.Tr("repo.watchers")
-	ctx.Data["CardsTitle"] = ctx.Tr("repo.watchers")
-	ctx.Data["PageIsWatchers"] = true
+	renderUserList(ctx, "repo.watchers", ctx.Repo.Repository.NumWatches,
+		func(opts db.ListOptions) ([]*user_model.User, error) {
+			return repo_model.GetRepoWatchers(ctx, ctx.Repo.Repository.ID, opts)
+		}, tplWatchers)
+}
 
-	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)
+// WatchersCards renders a repository's watchers user cards
+func WatchersCards(ctx *context.Context) {
+	renderUserList(ctx, "repo.watchers", ctx.Repo.Repository.NumWatches,
+		func(opts db.ListOptions) ([]*user_model.User, error) {
+			return repo_model.GetRepoWatchers(ctx, ctx.Repo.Repository.ID, opts)
+		}, tplCards)
 }
 
 // Stars render repository's starred users
 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)
+	renderUserList(ctx, "repo.stargazers", ctx.Repo.Repository.NumStars,
+		func(opts db.ListOptions) ([]*user_model.User, error) {
+			return repo_model.GetStargazers(ctx, ctx.Repo.Repository, opts)
+		}, tplWatchers)
+}
+
+// StarsCards renders a repository's stargazers user cards
+func StarsCards(ctx *context.Context) {
+	renderUserList(ctx, "repo.stargazers", ctx.Repo.Repository.NumStars,
+		func(opts db.ListOptions) ([]*user_model.User, error) {
+			return repo_model.GetStargazers(ctx, ctx.Repo.Repository, opts)
+		}, tplCards)
 }
 
 // Forks render repository's forked users

routers/web/web.go

@@ -1599,7 +1599,9 @@ func registerRoutes(m *web.Router) {
 
 	m.Group("/{username}/{reponame}", func() {
 		m.Get("/stars", repo.Stars)
+		m.Get("/stars/cards", repo.StarsCards)
 		m.Get("/watchers", repo.Watchers)
+		m.Get("/watchers/cards", repo.WatchersCards)
 		m.Get("/search", reqRepoCodeReader, repo.Search)
 		m.Post("/action/{action}", reqSignIn, repo.Action)
 	}, optSignIn, context.RepoAssignment, context.RepoRef())

templates/repo/watchers.tmpl

@@ -1,7 +1,14 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository watchers">
 	{{template "repo/header" .}}
-	<div class="ui container">
+	<div class="no-loading-indicator tw-hidden"></div>
+	<div
+		hx-trigger="refreshCards from:body"
+		hx-indicator=".no-loading-indicator"
+		hx-swap="innerHTML"
+		hx-get="{{$.Link}}/cards"
+		class="ui container"
+	>
 		{{template "repo/user_cards" .}}
 	</div>
 </div>