Fix inconsistent disabled styling on logged-out repo header buttons (#37406)

Make the watch, star, and fork buttons in the repo header consistent for
logged-out users:

- Apply the same look to all three buttons (number labels
included), instead of only the action button being grayed.
- Clicking any of them while logged out now leads to the login page
(with a redirect back) instead of being inert.
- Split the per-button markup out of `header.tmpl` into a dedicated
`templates/repo/header/` folder (`fork.tmpl`, `star.tmpl`,
`watch.tmpl`).

---------

Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

routers/web/repo/star.go

@@ -11,7 +11,7 @@ import (
 	"code.gitea.io/gitea/services/context"
 )
 
-const tplStarUnstar templates.TplName = "repo/star_unstar"
+const tplStarUnstar templates.TplName = "repo/header/star"
 
 func ActionStar(ctx *context.Context) {
 	err := repo_model.StarRepo(ctx, ctx.Doer, ctx.Repo.Repository, ctx.PathParam("action") == "star")

routers/web/repo/watch.go

@@ -11,7 +11,7 @@ import (
 	"code.gitea.io/gitea/services/context"
 )
 
-const tplWatchUnwatch templates.TplName = "repo/watch_unwatch"
+const tplWatchUnwatch templates.TplName = "repo/header/watch"
 
 func ActionWatch(ctx *context.Context) {
 	err := repo_model.WatchRepo(ctx, ctx.Doer, ctx.Repo.Repository, ctx.PathParam("action") == "watch")

templates/repo/header.tmpl

@@ -57,59 +57,12 @@
 						{{svg "octicon-rss" 16}}
 					</a>
 					{{end}}
-					{{template "repo/watch_unwatch" $}}
+					{{template "repo/header/watch" $}}
 					{{if not $.DisableStars}}
-					{{template "repo/star_unstar" $}}
+					{{template "repo/header/star" $}}
 					{{end}}
 					{{if and (not .IsEmpty) ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode)}}
-						<div class="ui labeled button
+						{{template "repo/header/fork" $}}
-							{{if or (not $.IsSigned) (and (not $.CanSignedUserFork) (not $.UserAndOrgForks))}}
-								disabled
-							{{end}}"
-							{{if not $.IsSigned}}
-								data-tooltip-content="{{ctx.Locale.Tr "repo.fork_guest_user"}}"
-							{{else if and (not $.CanSignedUserFork) (not $.UserAndOrgForks)}}
-								data-tooltip-content="{{ctx.Locale.Tr "repo.fork_from_self"}}"
-							{{end}}
-						>
-							<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
-								{{if not $.CanSignedUserFork}}
-									{{if gt (len $.UserAndOrgForks) 1}}
-										href="#" data-modal="#fork-repo-modal"
-									{{else if eq (len $.UserAndOrgForks) 1}}
-										href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
-									{{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}}
-									{{end}}
-								{{else if not $.UserAndOrgForks}}
-									href="{{$.RepoLink}}/fork"
-								{{else}}
-									href="#" data-modal="#fork-repo-modal"
-								{{end}}
-							>
-								{{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
-							</a>
-							<a class="ui basic label" href="{{.Link}}/forks">
-								{{CountFmt .NumForks}}
-							</a>
-						</div>
-						<div class="ui small modal" id="fork-repo-modal">
-							<div class="header">
-								{{ctx.Locale.Tr "repo.already_forked" .Name}}
-							</div>
-							<div class="content tw-text-left">
-								<div class="ui list">
-									{{range $.UserAndOrgForks}}
-										<div class="ui item tw-py-2">
-											<a href="{{.Link}}">{{svg "octicon-repo-forked" 16 "tw-mr-2"}}{{.FullName}}</a>
-										</div>
-									{{end}}
-								</div>
-								{{if $.CanSignedUserFork}}
-								<div class="divider"></div>
-								<a href="{{$.RepoLink}}/fork">{{ctx.Locale.Tr "repo.fork_to_different_account"}}</a>
-								{{end}}
-							</div>
-						</div>
 					{{end}}
 				</div>
 			{{end}}

templates/repo/header/fork.tmpl

@@ -0,0 +1,47 @@
+{{$canNotForkOwn := and $.IsSigned (not $.CanSignedUserFork) (not $.UserAndOrgForks)}}
+<div class="ui labeled button"
+	{{if not $.IsSigned}}
+		data-tooltip-content="{{ctx.Locale.Tr "repo.fork_guest_user"}}"
+	{{else if $canNotForkOwn}}
+		data-tooltip-content="{{ctx.Locale.Tr "repo.fork_from_self"}}"
+	{{end}}
+>
+	<a role="button" class="ui compact small basic button {{if $.ShowForkModal}}show-modal{{end}}"
+		{{if not $.IsSigned}}
+			href="{{AppSubUrl}}/user/login"
+		{{else if $.ShowForkModal}}{{/* see backend comment for this logic */}}
+			href="#" data-modal="#fork-repo-modal"
+		{{else if eq (len $.UserAndOrgForks) 1}}
+			href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
+		{{else if $canNotForkOwn}}
+			href="#"
+		{{else}}
+			href="{{$.RepoLink}}/fork"
+		{{end}}
+	>
+		{{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
+	</a>
+	<a class="ui basic label" href="{{$.Repository.Link}}/forks">
+		{{CountFmt $.Repository.NumForks}}
+	</a>
+</div>
+{{if $.ShowForkModal}}
+<div class="ui small modal" id="fork-repo-modal">
+	<div class="header">
+		{{ctx.Locale.Tr "repo.already_forked" $.Repository.Name}}
+	</div>
+	<div class="content">
+		<div class="ui relaxed list">
+			{{range $.UserAndOrgForks}}
+				<div class="item">
+					<a class="flex-text-block" href="{{.Link}}">{{svg "octicon-repo-forked"}}{{.FullName}}</a>
+				</div>
+			{{end}}
+		</div>
+		{{if $.CanSignedUserFork}}
+		<div class="divider"></div>
+		<a href="{{$.RepoLink}}/fork">{{ctx.Locale.Tr "repo.fork_to_different_account"}}</a>
+		{{end}}
+	</div>
+</div>
+{{end}}

templates/repo/header/star.tmpl

@@ -1,18 +1,18 @@
 <div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
 	{{$buttonText := ctx.Locale.Tr "repo.star"}}
 	{{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}}
-	<button type="button" class="ui compact small basic button" aria-label="{{$buttonText}}"
+	<a role="button" class="ui compact small basic button" aria-label="{{$buttonText}}"
 		{{if $.IsSigned}}
 			data-fetch-method="post"
 			data-fetch-url="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}"
 			data-fetch-sync="$closest(.ui.labeled.button)"
 		{{else}}
-			disabled
+			href="{{AppSubUrl}}/user/login"
 		{{end}}
 	>
 		{{svg (Iif $.IsStaringRepo "octicon-star-fill" "octicon-star")}}
 		<span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
-	</button>
+	</a>
 	<a class="ui basic label" href="{{$.RepoLink}}/stars">
 		{{CountFmt .Repository.NumStars}}
 	</a>

templates/repo/header/watch.tmpl

@@ -1,19 +1,19 @@
 <div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
 	{{$buttonText := ctx.Locale.Tr "repo.watch"}}
 	{{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}}
-	<button type="button" class="ui compact small basic button" aria-label="{{$buttonText}}"
+	<a role="button" class="ui compact small basic button" aria-label="{{$buttonText}}"
 		{{if $.IsSigned}}
 			data-fetch-method="post"
 			data-fetch-url="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}"
 			data-fetch-sync="$closest(.ui.labeled.button)"
 		{{else}}
-			disabled
+			href="{{AppSubUrl}}/user/login"
 		{{end}}
 	>
 		{{svg "octicon-eye"}}
 		<span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
-	</button>
+	</a>
-	<a class="ui basic label" href="{{.RepoLink}}/watchers">
+	<a class="ui basic label" href="{{$.RepoLink}}/watchers">
 		{{CountFmt .Repository.NumWatches}}
 	</a>
 </div>