From 13b7351479790df83fe4d45f7cdd57801d3596c7 Mon Sep 17 00:00:00 2001
From: Kilisei <seitzkili+git@gmail.com>
Date: Sat, 21 Jun 2025 23:44:01 +0200
Subject: [PATCH 1/5] Use `shallowRef` instead of `ref` in `.vue` files where
 possible

reference: https://vuejs.org/api/reactivity-advanced.html#shallowref
---
 web_src/js/components/ActivityHeatmap.vue      |  4 ++--
 web_src/js/components/ContextPopup.vue         | 10 +++++-----
 web_src/js/components/DiffFileTreeItem.vue     |  4 ++--
 web_src/js/components/PullRequestMergeForm.vue | 18 +++++++++---------
 .../js/components/RepoActivityTopAuthors.vue   |  6 +++---
 web_src/js/components/RepoCodeFrequency.vue    |  6 +++---
 web_src/js/components/RepoRecentCommits.vue    |  6 +++---
 web_src/js/components/ViewFileTree.vue         |  4 ++--
 web_src/js/components/ViewFileTreeItem.vue     |  6 +++---
 9 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index eaa9b0ffb13b3..296cb61cff516 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
 import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
-import {onMounted, ref} from 'vue';
+import {onMounted, shallowRef} from 'vue';
 import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
 
 defineProps<{
@@ -24,7 +24,7 @@ const colorRange = [
   'var(--color-primary-dark-4)',
 ];
 
-const endDate = ref(new Date());
+const endDate = shallowRef(new Date());
 
 onMounted(() => {
   // work around issue with first legend color being rendered twice and legend cut off
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 0aae202d42f18..061e8026aa070 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -2,16 +2,16 @@
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
 import {getIssueColor, getIssueIcon} from '../features/issue.ts';
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, shallowRef, useTemplateRef} from 'vue';
 import type {IssuePathInfo} from '../types.ts';
 
 const {appSubUrl, i18n} = window.config;
 
-const loading = ref(false);
+const loading = shallowRef(false);
 const issue = ref(null);
-const renderedLabels = ref('');
+const renderedLabels = shallowRef('');
 const i18nErrorOccurred = i18n.error_occurred;
-const i18nErrorMessage = ref(null);
+const i18nErrorMessage = shallowRef(null);
 
 const createdAt = computed(() => new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}));
 const body = computed(() => {
@@ -22,7 +22,7 @@ const body = computed(() => {
   return body;
 });
 
-const root = ref<HTMLElement | null>(null);
+const root = useTemplateRef('root');
 
 onMounted(() => {
   root.value.addEventListener('ce-load-context-popup', (e: CustomEventInit<IssuePathInfo>) => {
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 24bf5900829e0..f15f093ff86f6 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {SvgIcon, type SvgName} from '../svg.ts';
-import {ref} from 'vue';
+import {shallowRef} from 'vue';
 import {type DiffStatus, type DiffTreeEntry, diffTreeStore} from '../modules/diff-file.ts';
 
 const props = defineProps<{
@@ -8,7 +8,7 @@ const props = defineProps<{
 }>();
 
 const store = diffTreeStore();
-const collapsed = ref(props.item.IsViewed);
+const collapsed = shallowRef(props.item.IsViewed);
 
 function getIconForDiffStatus(pType: DiffStatus) {
   const diffTypes: Record<DiffStatus, { name: SvgName, classes: Array<string> }> = {
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 4f291f5ca1c13..9ac5e92f483cb 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
+import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {toggleElem} from '../utils/dom.ts';
 
@@ -7,12 +7,12 @@ const {csrfToken, pageData} = window.config;
 
 const mergeForm = ref(pageData.pullRequestMergeForm);
 
-const mergeTitleFieldValue = ref('');
-const mergeMessageFieldValue = ref('');
-const deleteBranchAfterMerge = ref(false);
-const autoMergeWhenSucceed = ref(false);
+const mergeTitleFieldValue = shallowRef('');
+const mergeMessageFieldValue = shallowRef('');
+const deleteBranchAfterMerge = shallowRef(false);
+const autoMergeWhenSucceed = shallowRef(false);
 
-const mergeStyle = ref('');
+const mergeStyle = shallowRef('');
 const mergeStyleDetail = ref({
   hideMergeMessageTexts: false,
   textDoMerge: '',
@@ -21,10 +21,10 @@ const mergeStyleDetail = ref({
   hideAutoMerge: false,
 });
 
-const mergeStyleAllowedCount = ref(0);
+const mergeStyleAllowedCount = shallowRef(0);
 
-const showMergeStyleMenu = ref(false);
-const showActionForm = ref(false);
+const showMergeStyleMenu = shallowRef(false);
+const showActionForm = shallowRef(false);
 
 const mergeButtonStyleClass = computed(() => {
   if (mergeForm.value.allOverridableChecksOk) return 'primary';
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index 77b85bd7e24fd..0601add60a5ea 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // @ts-expect-error - module exports no types
 import {VueBarGraph} from 'vue-bar-graph';
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, useTemplateRef} from 'vue';
 
 const colors = ref({
   barColor: 'green',
@@ -41,8 +41,8 @@ const graphWidth = computed(() => {
   return activityTopAuthors.length * 40;
 });
 
-const styleElement = ref<HTMLElement | null>(null);
-const altStyleElement = ref<HTMLElement | null>(null);
+const styleElement = useTemplateRef('styleElement');
+const altStyleElement = useTemplateRef('altStyleElement');
 
 onMounted(() => {
   const refStyle = window.getComputedStyle(styleElement.value);
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index f04fc065b6f09..c8bae8229c66c 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -23,7 +23,7 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
@@ -47,8 +47,8 @@ defineProps<{
   };
 }>();
 
-const isLoading = ref(false);
-const errorText = ref('');
+const isLoading = shallowRef(false);
+const errorText = shallowRef('');
 const repoLink = ref(pageData.repoLink || []);
 const data = ref<DayData[]>([]);
 
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 1b3d8fd459003..34ac0068a665d 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -21,7 +21,7 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
@@ -43,8 +43,8 @@ defineProps<{
   };
 }>();
 
-const isLoading = ref(false);
-const errorText = ref('');
+const isLoading = shallowRef(false);
+const errorText = shallowRef('');
 const repoLink = ref(pageData.repoLink || []);
 const data = ref<DayData[]>([]);
 
diff --git a/web_src/js/components/ViewFileTree.vue b/web_src/js/components/ViewFileTree.vue
index d56082415980a..1f90f9258670c 100644
--- a/web_src/js/components/ViewFileTree.vue
+++ b/web_src/js/components/ViewFileTree.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import ViewFileTreeItem from './ViewFileTreeItem.vue';
-import {onMounted, ref} from 'vue';
+import {onMounted, useTemplateRef} from 'vue';
 import {createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
-const elRoot = ref<HTMLElement | null>(null);
+const elRoot = useTemplateRef('elRoot');
 
 const props = defineProps({
   repoLink: {type: String, required: true},
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 4a7569e92139a..35339a4c926c2 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {isPlainClick} from '../utils/dom.ts';
-import {ref} from 'vue';
+import {ref, shallowRef} from 'vue';
 import {type createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
 type Item = {
@@ -20,9 +20,9 @@ const props = defineProps<{
 }>();
 
 const store = props.store;
-const isLoading = ref(false);
+const isLoading = shallowRef(false);
 const children = ref(props.item.children);
-const collapsed = ref(!props.item.children);
+const collapsed = shallowRef(!props.item.children);
 
 const doLoadChildren = async () => {
   collapsed.value = !collapsed.value;

From c08ae1f59f366384b5efaca9dfab075fceea8895 Mon Sep 17 00:00:00 2001
From: Kilisei <seitzkili+git@gmail.com>
Date: Sun, 22 Jun 2025 03:03:41 +0200
Subject: [PATCH 2/5] use shallowRef and remove not needed refs

---
 web_src/js/components/ContextPopup.vue           | 4 ++--
 web_src/js/components/PullRequestMergeForm.vue   | 2 +-
 web_src/js/components/RepoActivityTopAuthors.vue | 4 ++--
 web_src/js/components/RepoCodeFrequency.vue      | 8 ++++----
 web_src/js/components/RepoRecentCommits.vue      | 4 ++--
 web_src/js/components/ViewFileTreeItem.vue       | 4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 061e8026aa070..5ec4499e480d6 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -2,13 +2,13 @@
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
 import {getIssueColor, getIssueIcon} from '../features/issue.ts';
-import {computed, onMounted, ref, shallowRef, useTemplateRef} from 'vue';
+import {computed, onMounted, shallowRef, useTemplateRef} from 'vue';
 import type {IssuePathInfo} from '../types.ts';
 
 const {appSubUrl, i18n} = window.config;
 
 const loading = shallowRef(false);
-const issue = ref(null);
+const issue = shallowRef(null);
 const renderedLabels = shallowRef('');
 const i18nErrorOccurred = i18n.error_occurred;
 const i18nErrorMessage = shallowRef(null);
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 9ac5e92f483cb..aa711aefc753b 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -5,7 +5,7 @@ import {toggleElem} from '../utils/dom.ts';
 
 const {csrfToken, pageData} = window.config;
 
-const mergeForm = ref(pageData.pullRequestMergeForm);
+const mergeForm = shallowRef(pageData.pullRequestMergeForm);
 
 const mergeTitleFieldValue = shallowRef('');
 const mergeMessageFieldValue = shallowRef('');
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index 0601add60a5ea..bbdfda41d049e 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 // @ts-expect-error - module exports no types
 import {VueBarGraph} from 'vue-bar-graph';
-import {computed, onMounted, ref, useTemplateRef} from 'vue';
+import {computed, onMounted, shallowRef, useTemplateRef} from 'vue';
 
-const colors = ref({
+const colors = shallowRef({
   barColor: 'green',
   textColor: 'black',
   textAltColor: 'white',
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index c8bae8229c66c..16109d14e1e2e 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -23,7 +23,7 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, ref, shallowRef} from 'vue';
+import {onMounted, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
@@ -49,8 +49,8 @@ defineProps<{
 
 const isLoading = shallowRef(false);
 const errorText = shallowRef('');
-const repoLink = ref(pageData.repoLink || []);
-const data = ref<DayData[]>([]);
+const repoLink = pageData.repoLink || [];
+const data = shallowRef<DayData[]>([]);
 
 onMounted(() => {
   fetchGraphData();
@@ -61,7 +61,7 @@ async function fetchGraphData() {
   try {
     let response: Response;
     do {
-      response = await GET(`${repoLink.value}/activity/code-frequency/data`);
+      response = await GET(`${repoLink}/activity/code-frequency/data`);
       if (response.status === 202) {
         await sleep(1000); // wait for 1 second before retrying
       }
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 34ac0068a665d..1651bcc4760ca 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -45,7 +45,7 @@ defineProps<{
 
 const isLoading = shallowRef(false);
 const errorText = shallowRef('');
-const repoLink = ref(pageData.repoLink || []);
+const repoLink = pageData.repoLink || [];
 const data = ref<DayData[]>([]);
 
 onMounted(() => {
@@ -57,7 +57,7 @@ async function fetchGraphData() {
   try {
     let response: Response;
     do {
-      response = await GET(`${repoLink.value}/activity/recent-commits/data`);
+      response = await GET(`${repoLink}/activity/recent-commits/data`);
       if (response.status === 202) {
         await sleep(1000); // wait for 1 second before retrying
       }
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 35339a4c926c2..5173c7eb46c19 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {isPlainClick} from '../utils/dom.ts';
-import {ref, shallowRef} from 'vue';
+import {shallowRef} from 'vue';
 import {type createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
 type Item = {
@@ -21,7 +21,7 @@ const props = defineProps<{
 
 const store = props.store;
 const isLoading = shallowRef(false);
-const children = ref(props.item.children);
+const children = shallowRef(props.item.children);
 const collapsed = shallowRef(!props.item.children);
 
 const doLoadChildren = async () => {

From e4a966d84a8c5addcf2d5c4c6ff48e07a3c5ebe1 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 22 Jun 2025 09:59:58 +0800
Subject: [PATCH 3/5] Update web_src/js/components/RepoCodeFrequency.vue

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/components/RepoCodeFrequency.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 16109d14e1e2e..f331a26fe9eb0 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -49,7 +49,7 @@ defineProps<{
 
 const isLoading = shallowRef(false);
 const errorText = shallowRef('');
-const repoLink = pageData.repoLink || [];
+const repoLink = pageData.repoLink;
 const data = shallowRef<DayData[]>([]);
 
 onMounted(() => {

From 2d886020882595803c8f121821a43516f01d7549 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 22 Jun 2025 10:04:12 +0800
Subject: [PATCH 4/5] Update web_src/js/components/RepoRecentCommits.vue

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/components/RepoRecentCommits.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 1651bcc4760ca..27aa27dfc30c2 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -45,7 +45,7 @@ defineProps<{
 
 const isLoading = shallowRef(false);
 const errorText = shallowRef('');
-const repoLink = pageData.repoLink || [];
+const repoLink = pageData.repoLink;
 const data = ref<DayData[]>([]);
 
 onMounted(() => {

From 46f7cc6581cc07d166125a46036db99a6ee9419e Mon Sep 17 00:00:00 2001
From: Kilisei <seitzkili+git@gmail.com>
Date: Sun, 22 Jun 2025 14:59:26 +0200
Subject: [PATCH 5/5] Remove unneeded shallowRef

---
 .../js/components/PullRequestMergeForm.vue    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index aa711aefc753b..b2c28414c04c1 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref, shallowRef, watch} from 'vue';
+import {computed, onMounted, onUnmounted, shallowRef, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {toggleElem} from '../utils/dom.ts';
 
 const {csrfToken, pageData} = window.config;
 
-const mergeForm = shallowRef(pageData.pullRequestMergeForm);
+const mergeForm = pageData.pullRequestMergeForm;
 
 const mergeTitleFieldValue = shallowRef('');
 const mergeMessageFieldValue = shallowRef('');
@@ -13,7 +13,7 @@ const deleteBranchAfterMerge = shallowRef(false);
 const autoMergeWhenSucceed = shallowRef(false);
 
 const mergeStyle = shallowRef('');
-const mergeStyleDetail = ref({
+const mergeStyleDetail = shallowRef({
   hideMergeMessageTexts: false,
   textDoMerge: '',
   mergeTitleFieldText: '',
@@ -27,27 +27,27 @@ const showMergeStyleMenu = shallowRef(false);
 const showActionForm = shallowRef(false);
 
 const mergeButtonStyleClass = computed(() => {
-  if (mergeForm.value.allOverridableChecksOk) return 'primary';
+  if (mergeForm.allOverridableChecksOk) return 'primary';
   return autoMergeWhenSucceed.value ? 'primary' : 'red';
 });
 
 const forceMerge = computed(() => {
-  return mergeForm.value.canMergeNow && !mergeForm.value.allOverridableChecksOk;
+  return mergeForm.canMergeNow && !mergeForm.allOverridableChecksOk;
 });
 
 watch(mergeStyle, (val) => {
-  mergeStyleDetail.value = mergeForm.value.mergeStyles.find((e: any) => e.name === val);
+  mergeStyleDetail.value = mergeForm.mergeStyles.find((e: any) => e.name === val);
   for (const elem of document.querySelectorAll('[data-pull-merge-style]')) {
     toggleElem(elem, elem.getAttribute('data-pull-merge-style') === val);
   }
 });
 
 onMounted(() => {
-  mergeStyleAllowedCount.value = mergeForm.value.mergeStyles.reduce((v: any, msd: any) => v + (msd.allowed ? 1 : 0), 0);
+  mergeStyleAllowedCount.value = mergeForm.mergeStyles.reduce((v: any, msd: any) => v + (msd.allowed ? 1 : 0), 0);
 
-  let mergeStyle = mergeForm.value.mergeStyles.find((e: any) => e.allowed && e.name === mergeForm.value.defaultMergeStyle)?.name;
-  if (!mergeStyle) mergeStyle = mergeForm.value.mergeStyles.find((e: any) => e.allowed)?.name;
-  switchMergeStyle(mergeStyle, !mergeForm.value.canMergeNow);
+  let mergeStyle = mergeForm.mergeStyles.find((e: any) => e.allowed && e.name === mergeForm.defaultMergeStyle)?.name;
+  if (!mergeStyle) mergeStyle = mergeForm.mergeStyles.find((e: any) => e.allowed)?.name;
+  switchMergeStyle(mergeStyle, !mergeForm.canMergeNow);
 
   document.addEventListener('mouseup', hideMergeStyleMenu);
 });
@@ -63,7 +63,7 @@ function hideMergeStyleMenu() {
 function toggleActionForm(show: boolean) {
   showActionForm.value = show;
   if (!show) return;
-  deleteBranchAfterMerge.value = mergeForm.value.defaultDeleteBranchAfterMerge;
+  deleteBranchAfterMerge.value = mergeForm.defaultDeleteBranchAfterMerge;
   mergeTitleFieldValue.value = mergeStyleDetail.value.mergeTitleFieldText;
   mergeMessageFieldValue.value = mergeStyleDetail.value.mergeMessageFieldText;
 }
@@ -74,7 +74,7 @@ function switchMergeStyle(name: string, autoMerge = false) {
 }
 
 function clearMergeMessage() {
-  mergeMessageFieldValue.value = mergeForm.value.defaultMergeMessage;
+  mergeMessageFieldValue.value = mergeForm.defaultMergeMessage;
 }
 </script>