go-gitea · 6543 · Jan 30, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "esbuild-loader": "4.0.2",
     "escape-goat": "4.0.0",
     "fast-glob": "3.3.2",
+    "htmx.org": "1.9.10",
     "jquery": "3.7.1",
     "katex": "0.16.9",
     "license-checker-webpack-plugin": "0.2.1",

diff --git a/routers/web/repo/issue_watch.go b/routers/web/repo/issue_watch.go
@@ -8,10 +8,15 @@ import (
 	"strconv"
 
 	issues_model "code.gitea.io/gitea/models/issues"
+	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/context"
 	"code.gitea.io/gitea/modules/log"
 )
 
+const (
+	tplWatching base.TplName = "repo/issue/view_content/watching"
+)
+
 // IssueWatch sets issue watching
 func IssueWatch(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
@@ -52,5 +57,7 @@ func IssueWatch(ctx *context.Context) {
 		return
 	}
 
-	ctx.Redirect(issue.Link())
+	ctx.Data["Issue"] = issue
+	ctx.Data["IssueWatch"] = &issues_model.IssueWatch{IsWatching: watch}
+	ctx.HTML(http.StatusOK, tplWatching)
 }
diff --git a/routers/web/user/profile.go b/routers/web/user/profile.go
@@ -14,6 +14,7 @@ import (
 	"code.gitea.io/gitea/models/db"
 	repo_model "code.gitea.io/gitea/models/repo"
 	user_model "code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/context"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/log"
@@ -26,6 +27,10 @@ import (
 	shared_user "code.gitea.io/gitea/routers/web/shared/user"
 )
 
+const (
+	tplProfileBigAvatar base.TplName = "shared/user/profile_big_avatar"
+)
+
 // OwnerProfile render profile page for a user or a organization (aka, repo owner)
 func OwnerProfile(ctx *context.Context) {
 	if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") {
@@ -309,8 +314,10 @@ func Action(ctx *context.Context) {
 
 	if err != nil {
 		log.Error("Failed to apply action %q: %v", ctx.FormString("action"), err)
-		ctx.JSONError(fmt.Sprintf("Action %q failed", ctx.FormString("action")))
+		ctx.Error(http.StatusBadRequest, fmt.Sprintf("Action %q failed", ctx.FormString("action")))
 		return
 	}
-	ctx.JSONOK()
+
+	shared_user.PrepareContextForProfileBigAvatar(ctx)
+	ctx.HTML(http.StatusOK, tplProfileBigAvatar)
 }
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
@@ -29,7 +29,7 @@
 	{{template "base/head_style" .}}
 	{{template "custom/header" .}}
 </head>
-<body>
+<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'>
 	{{ctx.DataRaceCheck $.Context}}
 	{{template "custom/body_outer_pre" .}}
 

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
@@ -270,19 +270,7 @@
 		<div class="ui watching">
 			<span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span>
 			<div class="gt-mt-3">
-				<form method="post" action="{{.Issue.Link}}/watch">
-					<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
-					{{$.CsrfTokenHtml}}
-					<button class="fluid ui button">
-						{{if $.IssueWatch.IsWatching}}
-							{{svg "octicon-mute" 16 "gt-mr-3"}}
-							{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
-						{{else}}
-							{{svg "octicon-unmute" 16 "gt-mr-3"}}
-							{{ctx.Locale.Tr "repo.issues.subscribe"}}
-						{{end}}
-					</button>
-				</form>
+				{{template "repo/issue/view_content/watching" .}}
 			</div>
 		</div>
 	{{end}}

diff --git a/templates/repo/issue/view_content/watching.tmpl b/templates/repo/issue/view_content/watching.tmpl
@@ -0,0 +1,13 @@
+<form hx-boost="true" hx-sync="this:replace" hx-target="this" hx-push-url="false" hx-swap="show:no-scroll" method="post" action="{{.Issue.Link}}/watch">
+	<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
+	<span class="htmx-indicator is-loading"></span>
+	<button class="fluid ui button">
+		{{if $.IssueWatch.IsWatching}}
+			{{svg "octicon-mute" 16 "gt-mr-3"}}
+			{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
+		{{else}}
+			{{svg "octicon-unmute" 16 "gt-mr-3"}}
+			{{ctx.Locale.Tr "repo.issues.subscribe"}}
+		{{end}}
+	</button>
+</form>
diff --git a/templates/shared/user/profile_big_avatar.tmpl b/templates/shared/user/profile_big_avatar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui card">
+<div id="profile-avatar-card" class="ui card">
 	<div id="profile-avatar" class="content gt-df">
 	{{if eq .SignedUserID .ContextUser.ID}}
 		<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
@@ -110,13 +110,13 @@
 			</li>
 			{{end}}
 			{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
-			<li class="follow">
+			<li class="follow" hx-target="#profile-avatar-card" hx-swap="outerHTML">
 				{{if $.IsFollowing}}
-					<button class="ui basic red button link-action" data-url="{{.ContextUser.HomeLink}}?action=unfollow">
+					<button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button">
 						{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}}
 					</button>
 				{{else}}
-					<button class="ui basic primary button link-action" data-url="{{.ContextUser.HomeLink}}?action=follow">
+					<button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button">
 						{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}}
 					</button>
 				{{end}}

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
@@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
 import {request, POST} from '../modules/fetch.js';
+import '../htmx.js';
 
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
 

diff --git a/web_src/js/htmx.js b/web_src/js/htmx.js
@@ -0,0 +1,14 @@
+import 'htmx.org';
+import {showErrorToast} from './modules/toast.js';
+
+// https://htmx.org/events/#htmx:sendError
+document.body.addEventListener('htmx:sendError', (event) => {
+  // TODO: add translations
+  showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
+});
+
+// https://htmx.org/events/#htmx:responseError
+document.body.addEventListener('htmx:responseError', (event) => {
+  // TODO: add translations
+  showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -214,6 +214,7 @@ export default {
       },
       override: {
         'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
+        'htmx.org@1.9.10': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause"
       },
       emitError: true,
       allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',