From 2a3d852e461b4c8f0766cc8be390b569a50c2625 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Thu, 30 Oct 2025 21:06:14 +0100
Subject: [PATCH] feat: convert create/rename branch and create tag to native
 dialog (#9760)

Followup to https://codeberg.org/forgejo/forgejo/pulls/8859, https://codeberg.org/forgejo/forgejo/pulls/9636.

Convert the create branch and rename branch modals in the branch list to native dialogs and convert the create branch and create tag in the commit view to native dialogs.

The dialogs in the commit view have been simplified and no longer uses javascript to construct the data in the dialog (thus would be eligible for nojs modals).

The dialogs have footer styled actions.

The rename branch modal now has a 'branch name' label to indicate the field is required.

E2E testing is added.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9760
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
---
 options/locale/locale_en-US.ini         |  2 +-
 templates/repo/branch/list.tmpl         | 86 +++++++++++-----------
 templates/repo/commit_header.tmpl       | 86 +++++++++-------------
 tests/e2e/branch-operations.test.e2e.ts | 95 +++++++++++++++++++++++++
 tests/e2e/commit-operations.test.e2e.ts | 68 ++++++++++++++++++
 web_src/css/modules/dialog.css          |  4 ++
 web_src/js/features/repo-branch.js      | 42 -----------
 web_src/js/features/repo-branch.ts      | 35 +++++++++
 web_src/js/index.js                     |  2 +-
 9 files changed, 279 insertions(+), 141 deletions(-)
 create mode 100644 tests/e2e/branch-operations.test.e2e.ts
 create mode 100644 tests/e2e/commit-operations.test.e2e.ts
 delete mode 100644 web_src/js/features/repo-branch.js
 create mode 100644 web_src/js/features/repo-branch.ts

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 118a0ee540..7d71282e40 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -2754,7 +2754,7 @@ branch.included = Included
 branch.create_new_branch = Create branch from branch:
 branch.confirm_create_branch = Create branch
 branch.warning_rename_default_branch = You are renaming the default branch.
-branch.rename_branch_to = Rename "%s" to:
+branch.rename_branch_to = Renaming branch "%s".
 branch.create_branch_operation = Create branch
 branch.new_branch = Create new branch
 branch.new_branch_from = Create new branch from "%s"
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 164ecbf62c..55a7bbcf07 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -32,9 +32,7 @@
 							<td class="right aligned middle aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not $.Repository.IsMirror) (not .IsDeleted)}}
 									<button class="btn interact-bg show-create-branch-modal tw-p-2"
-										data-modal="#create-branch-modal"
 										data-branch-from="{{$.DefaultBranchBranch.DBBranch.Name}}"
-										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" ($.DefaultBranchBranch.DBBranch.Name)}}"
 									>
 										{{svg "octicon-git-branch"}}
@@ -53,9 +51,8 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-									<button class="btn interact-bg tw-p-2 show-modal show-rename-branch-modal"
+									<button class="btn interact-bg tw-p-2 show-rename-branch-modal"
 										data-is-default-branch="true"
-										data-modal="#rename-branch-modal"
 										data-old-branch-name="{{$.DefaultBranchBranch.DBBranch.Name}}"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.rename" ($.DefaultBranchBranch.DBBranch.Name)}}"
 									>
@@ -156,11 +153,9 @@
 							</td>
 							<td class="three wide right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not $.Repository.IsMirror) (not .DBBranch.IsDeleted)}}
-									<button class="btn interact-bg tw-p-2 show-modal show-create-branch-modal"
+									<button class="btn interact-bg tw-p-2 show-create-branch-modal"
 										data-branch-from="{{.DBBranch.Name}}"
-										data-branch-from-urlcomponent="{{PathEscapeSegments .DBBranch.Name}}"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" .DBBranch.Name}}"
-										data-modal="#create-branch-modal" data-name="{{.DBBranch.Name}}"
 									>
 										{{svg "octicon-git-branch"}}
 									</button>
@@ -178,10 +173,9 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted) (not $.IsMirror)}}
-									<button class="btn interact-bg tw-p-2 show-modal show-rename-branch-modal"
+									<button class="btn interact-bg tw-p-2 show-rename-branch-modal"
 										data-is-default-branch="false"
 										data-old-branch-name="{{.DBBranch.Name}}"
-										data-modal="#rename-branch-modal"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.rename" (.DBBranch.Name)}}"
 									>
 										{{svg "octicon-pencil"}}
@@ -221,44 +215,44 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-<div class="ui mini modal" id="create-branch-modal">
-	<div class="header">
-		{{ctx.Locale.Tr "repo.branch.new_branch"}}
-	</div>
+<dialog id="create-branch-modal">
+	<article>
+		<header>{{ctx.Locale.Tr "repo.branch.new_branch"}}</header>
+		<form class="ui form" id="create-branch-form" action="" data-base-action="{{.Link}}/_new/branch/" method="post">
+			<div class="content">
+				<div class="field">
+					{{ctx.Locale.Tr "repo.branch.create_new_branch"}}
+					<span id="modal-create-branch-from-span"></span>
+				</div>
+				<div class="required field">
+					<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
+					<input id="new_branch_name" name="new_branch_name" required>
+				</div>
+			</div>
+			{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+		</form>
+	</article>
+</dialog>
 
-	<form class="ui form" id="create-branch-form" action="" data-base-action="{{.Link}}/_new/branch/" method="post">
-		<div class="content">
-			<div class="field">
-				{{ctx.Locale.Tr "repo.branch.create_new_branch"}}
-				<span id="modal-create-branch-from-span"></span>
-			</div>
-			<div class="required field">
-				<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
-				<input id="new_branch_name" name="new_branch_name" required>
-			</div>
+<dialog id="rename-branch-modal">
+	<article>
+		<header>{{ctx.Locale.Tr "repo.settings.rename_branch"}}</header>
+		<div class="content default-branch-warning">
+			<div class="ui warning message">{{ctx.Locale.Tr "repo.branch.warning_rename_default_branch"}}</div>
 		</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
-	</form>
-</div>
-
-<div class="ui mini modal" id="rename-branch-modal">
-	<div class="header">
-		{{ctx.Locale.Tr "repo.settings.rename_branch"}}
-	</div>
-	<form class="ui form" action="{{$.Repository.Link}}/settings/rename_branch" method="post">
-		<div class="content">
-			<div class="field default-branch-warning">
-				<span class="text red">{{ctx.Locale.Tr "repo.branch.warning_rename_default_branch"}}</span>
+		<form class="ui form" action="{{$.Repository.Link}}/settings/rename_branch" method="post">
+			<div class="content">
+				<input name="from" type="hidden" required>
+				<div class="field">
+					<span class="label-branch-from" data-locale="{{ctx.Locale.Tr "repo.branch.rename_branch_to"}}"></span>
+				</div>
+				<div class="required field">
+					<label for="to_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
+					<input id="to_branch_name" name="to" required>
+				</div>
 			</div>
-			<div class="field">
-				<span class="text" data-rename-branch-to="{{ctx.Locale.Tr "repo.branch.rename_branch_to"}}"></span>
-			</div>
-			<input name="from" type="hidden" required>
-			<div class="required field">
-				<input name="to" required>
-			</div>
-		</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
-	</form>
-</div>
+			{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+		</form>
+	</article>
+</dialog>
 {{template "base/footer" .}}
diff --git a/templates/repo/commit_header.tmpl b/templates/repo/commit_header.tmpl
index 512af1091f..3426d5feac 100644
--- a/templates/repo/commit_header.tmpl
+++ b/templates/repo/commit_header.tmpl
@@ -37,20 +37,10 @@
 						<div class="menu">
 							<div class="ui header">{{ctx.Locale.Tr "repo.commit.operations"}}</div>
 							<div class="divider"></div>
-							<div class="item show-create-branch-modal"
-								data-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" (.CommitID)}}" {{/* used by the form */}}
-								data-branch-from="{{ShortSha .CommitID}}"
-								data-branch-from-urlcomponent="{{.CommitID}}"
-								data-modal="#create-branch-modal">
+							<div class="item show-modal" data-modal="#create-branch-modal">
 								{{ctx.Locale.Tr "repo.branch.create_branch_operation"}}
 							</div>
-							<div class="item show-create-branch-modal"
-								data-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" (.CommitID)}}" {{/* used by the form */}}
-								data-branch-from="{{ShortSha .CommitID}}"
-								data-branch-from-urlcomponent="{{.CommitID}}"
-								data-modal="#create-tag-modal"
-								data-modal-from-span="#modal-create-tag-from-span"
-								data-modal-form="#create-tag-form">
+							<div class="item show-modal" data-modal="#create-tag-modal">
 								{{ctx.Locale.Tr "repo.tag.create_tag_operation"}}
 							</div>
 							<div class="item show-modal revert-button"
@@ -84,53 +74,47 @@
 									</form>
 								</div>
 							</div>
-							<div class="ui small modal" id="create-branch-modal">
-								<div class="header">
-									{{ctx.Locale.Tr "repo.branch.new_branch"}}
-								</div>
-								<div class="content">
-									<form class="ui form" id="create-branch-form" action="" data-base-action="{{.RepoLink}}/branches/_new/commit/" method="post">
-										<div class="field">
-											<label>
-												{{ctx.Locale.Tr "repo.branch.new_branch_from" (`<span class="text" id="modal-create-branch-from-span"></span>`|SafeHTML)}}
-											</label>
+							<dialog id="create-branch-modal">
+								<article>
+									<header>{{ctx.Locale.Tr "repo.branch.new_branch"}}</header>
+									<form class="ui form" action="{{.RepoLink}}/branches/_new/commit/{{.CommitID}}" method="post">
+										<div class="content">
+											<div class="field">
+												<label><span class="text">{{ctx.Locale.Tr "repo.branch.new_branch_from" (ShortSha .CommitID)}}</span></label>
+											</div>
+											<div class="required field">
+												<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
+												<input id="new_branch_name" name="new_branch_name" required>
+											</div>
 										</div>
-										<div class="required field">
-											<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
-											<input id="new_branch_name" name="new_branch_name" required>
-										</div>
-
-										<div class="text right actions">
-											<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
+										<div class="actions">
+											<button type="button" class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
 											<button class="ui primary button">{{ctx.Locale.Tr "repo.branch.confirm_create_branch"}}</button>
 										</div>
 									</form>
-								</div>
-							</div>
-							<div class="ui small modal" id="create-tag-modal">
-								<div class="header">
-									{{ctx.Locale.Tr "repo.tag.create_tag_operation"}}
-								</div>
-								<div class="content">
-									<form class="ui form" id="create-tag-form" action="" data-base-action="{{.RepoLink}}/branches/_new/commit/" method="post">
-										<input type="hidden" name="create_tag" value="true">
-										<div class="field">
-											<label>
-												{{ctx.Locale.Tr "repo.tag.create_tag_from" (`<span class="text" id="modal-create-tag-from-span"></span>`|SafeHTML)}}
-											</label>
+								</article>
+							</dialog>
+							<dialog id="create-tag-modal">
+								<article>
+									<header>{{ctx.Locale.Tr "repo.tag.create_tag_operation"}}</header>
+									<form class="ui form" action="{{.RepoLink}}/branches/_new/commit/{{.CommitID}}" method="post">
+										<div class="content">
+											<input type="hidden" name="create_tag" value="true">
+											<div class="field">
+												<label><span class="text">{{ctx.Locale.Tr "repo.tag.create_tag_from" (ShortSha .CommitID)}}</span></label>
+											</div>
+											<div class="required field">
+												<label for="new_branch_name">{{ctx.Locale.Tr "repo.release.tag_name"}}</label>
+												<input id="new_branch_name" name="new_branch_name" required>
+											</div>
 										</div>
-										<div class="required field">
-											<label for="new_branch_name">{{ctx.Locale.Tr "repo.release.tag_name"}}</label>
-											<input id="new_branch_name" name="new_branch_name" required>
-										</div>
-
-										<div class="text right actions">
-											<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
+										<div class="actions">
+											<button type="button" class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
 											<button class="ui primary button">{{ctx.Locale.Tr "repo.tag.confirm_create_tag"}}</button>
 										</div>
 									</form>
-								</div>
-							</div>
+								</article>
+							</dialog>
 							{{if not .NoteRendered}}
 								<div id="commit-notes-add-button" class="item">
 									{{ctx.Locale.Tr "repo.diff.git-notes.add"}}
diff --git a/tests/e2e/branch-operations.test.e2e.ts b/tests/e2e/branch-operations.test.e2e.ts
new file mode 100644
index 0000000000..8d8bdf691c
--- /dev/null
+++ b/tests/e2e/branch-operations.test.e2e.ts
@@ -0,0 +1,95 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/repo/branch/list.tmpl
+// web_src/js/features/repo-branch.ts
+// @watch end
+
+import {expect} from '@playwright/test';
+import {dynamic_id, test} from './utils_e2e.ts';
+import {screenshot} from './shared/screenshots.ts';
+
+test.use({user: 'user2'});
+
+test('Create branch from branch', async ({page}) => {
+  let response = await page.goto('/user2/repo1/branches');
+  expect(response?.status()).toBe(200);
+
+  // Open create branch modal.
+  await page.getByRole('button', {name: 'Create new branch from "branch2"'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+  await screenshot(page, page.locator('#create-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeHidden();
+
+  // Open it again and make a branch.
+  await page.getByRole('button', {name: 'Create new branch from "branch2"'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Confirm'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
+
+test('Rename normal branch', async ({page}) => {
+  let response = await page.goto('/user2/repo1/branches');
+  expect(response?.status()).toBe(200);
+
+  // Open rename branch modal.
+  await page.locator('button[data-is-default-branch="false"]:not([data-old-branch-name="branch2"])').first().click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeHidden();
+  await screenshot(page, page.locator('#rename-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#rename-branch-modal')).toBeHidden();
+
+  // Open it again and rename the branch.
+  await page.locator('button[data-is-default-branch="false"]:not([data-old-branch-name="branch2"])').first().click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeHidden();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Confirm'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
+
+test('Rename default branch', async ({page}) => {
+  let response = await page.goto('/user2/repo1/branches');
+  expect(response?.status()).toBe(200);
+
+  // Open rename branch modal.
+  await page.locator('button[data-is-default-branch="true"]').click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeVisible();
+  await screenshot(page, page.locator('#rename-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#rename-branch-modal')).toBeHidden();
+
+  // Open it again and rename the branch.
+  await page.locator('button[data-is-default-branch="true"]').click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeVisible();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Confirm'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
diff --git a/tests/e2e/commit-operations.test.e2e.ts b/tests/e2e/commit-operations.test.e2e.ts
new file mode 100644
index 0000000000..6ef02b66f8
--- /dev/null
+++ b/tests/e2e/commit-operations.test.e2e.ts
@@ -0,0 +1,68 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/repo/commit_header.tmpl
+// @watch end
+
+import {expect} from '@playwright/test';
+import {dynamic_id, test} from './utils_e2e.ts';
+import {screenshot} from './shared/screenshots.ts';
+
+test.use({user: 'user2'});
+
+test('Create branch from commit', async ({page}) => {
+  let response = await page.goto('/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d');
+  expect(response?.status()).toBe(200);
+
+  // Open create branch modal.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create branch'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+  await screenshot(page, page.locator('#create-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeHidden();
+
+  // Open it again and make a branch.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create branch'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Create branch'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
+
+test('Create tag from commit', async ({page}) => {
+  let response = await page.goto('/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d');
+  expect(response?.status()).toBe(200);
+
+  // Open create tag modal.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create tag'}).click();
+  await expect(page.locator('#create-tag-modal')).toBeVisible();
+  await screenshot(page, page.locator('#create-tag-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#create-tag-modal')).toBeHidden();
+
+  // Open it again and make a branch.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create tag'}).click();
+  await expect(page.locator('#create-tag-modal')).toBeVisible();
+
+  const tagName = dynamic_id();
+  await page.getByRole('textbox').fill(tagName);
+  await page.getByRole('button', {name: 'Create tag'}).click();
+
+  // Verify tag exists.
+  response = await page.goto(`/user2/repo1/releases/tag/${tagName}`);
+  expect(response?.status()).toBe(200);
+});
diff --git a/web_src/css/modules/dialog.css b/web_src/css/modules/dialog.css
index 711d54b3ea..f31d34ccd9 100644
--- a/web_src/css/modules/dialog.css
+++ b/web_src/css/modules/dialog.css
@@ -69,6 +69,10 @@ dialog .content {
   color: var(--color-text);
 }
 
+dialog .content:not(.tw-hidden) + form > .content {
+  padding-top: 0;
+}
+
 dialog .actions {
   background: var(--color-secondary-bg);
   border-color: var(--color-secondary);
diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js
deleted file mode 100644
index b9ffc6127f..0000000000
--- a/web_src/js/features/repo-branch.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import $ from 'jquery';
-import {toggleElem} from '../utils/dom.js';
-
-export function initRepoBranchButton() {
-  initRepoCreateBranchButton();
-  initRepoRenameBranchButton();
-}
-
-function initRepoCreateBranchButton() {
-  // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code)
-  for (const el of document.querySelectorAll('.show-create-branch-modal')) {
-    el.addEventListener('click', () => {
-      const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form';
-      const modalForm = document.querySelector(modalFormName);
-      if (!modalForm) return;
-      modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`;
-
-      const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
-      document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
-
-      $(el.getAttribute('data-modal')).modal('show');
-    });
-  }
-}
-
-function initRepoRenameBranchButton() {
-  for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
-    el.addEventListener('click', () => {
-      const target = el.getAttribute('data-modal');
-      const modal = document.querySelector(target);
-      const oldBranchName = el.getAttribute('data-old-branch-name');
-      modal.querySelector('input[name=from]').value = oldBranchName;
-
-      // display the warning that the branch which is chosen is the default branch
-      const warn = modal.querySelector('.default-branch-warning');
-      toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true');
-
-      const text = modal.querySelector('[data-rename-branch-to]');
-      text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName);
-    });
-  }
-}
diff --git a/web_src/js/features/repo-branch.ts b/web_src/js/features/repo-branch.ts
new file mode 100644
index 0000000000..a90045b3fc
--- /dev/null
+++ b/web_src/js/features/repo-branch.ts
@@ -0,0 +1,35 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import {toggleElem} from '../utils/dom.js';
+import {showModal} from '../modules/modal.ts';
+
+export function initRepoBranchButton() {
+  const createBranchModal = document.querySelector('#create-branch-modal');
+  for (const el of document.querySelectorAll('.show-create-branch-modal')) {
+    el.addEventListener('click', () => {
+      const createBranchModalForm = createBranchModal.querySelector('form');
+      const branchFromName = el.getAttribute('data-branch-from');
+
+      createBranchModalForm.action = createBranchModalForm.getAttribute('data-base-action') + encodeURIComponent(branchFromName);
+      createBranchModal.querySelector('#modal-create-branch-from-span').textContent = branchFromName;
+
+      showModal('create-branch-modal', undefined);
+    });
+  }
+
+  const renameBranchModel = document.querySelector('#rename-branch-modal');
+  for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
+    el.addEventListener('click', () => {
+      const oldBranchName = el.getAttribute('data-old-branch-name');
+      (renameBranchModel.querySelector('input[name="from"]') as HTMLInputElement).value = oldBranchName;
+
+      const branchToEl = renameBranchModel.querySelector('.label-branch-from');
+      branchToEl.textContent = branchToEl.getAttribute('data-locale').replace('%s', oldBranchName);
+
+      toggleElem(renameBranchModel.querySelector('.default-branch-warning'), el.getAttribute('data-is-default-branch') === 'true');
+
+      showModal('rename-branch-modal', undefined);
+    });
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 93510c1e23..8701385e92 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -66,7 +66,7 @@ import {initRepoEditor} from './features/repo-editor.js';
 import {initCompSearchUserBox} from './features/comp/SearchUserBox.js';
 import {initInstall} from './features/install.js';
 import {initCompWebHookEditor} from './features/comp/WebHookEditor.js';
-import {initRepoBranchButton} from './features/repo-branch.js';
+import {initRepoBranchButton} from './features/repo-branch.ts';
 import {initCommonOrganization} from './features/common-organization.js';
 import {initRepoWikiForm} from './features/repo-wiki.js';
 import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';