use shallowRef and remove not needed refs

Author: Kilisei

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);

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('');

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',

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
       }

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
       }

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 () => {