Migrate vue components to setup (#32329)

Migrated a handful Vue components to the `setup` syntax using
composition api as it has better Typescript support and is becoming the
new default in the Vue ecosystem.

- [x] ActionRunStatus.vue    
- [x] ActivityHeatmap.vue
- [x] ContextPopup.vue       
- [x] DiffFileList.vue
- [x] DiffFileTree.vue       
- [x] DiffFileTreeItem.vue    
- [x] PullRequestMergeForm.vue
- [x] RepoActivityTopAuthors.vue  
- [x] RepoCodeFrequency.vue
- [x] RepoRecentCommits.vue
- [x] ScopedAccessTokenSelector.vue

Left some larger components untouched for now to not go to crazy in this
single PR:
- [ ] DiffCommitSelector.vue  
- [ ] RepoActionView.vue
- [ ] RepoContributors.vue
- [ ] DashboardRepoList.vue  
- [ ] RepoBranchTagSelector.vue

web_src/js/components/DiffFileTreeItem.vue

@@ -1,33 +1,41 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {diffTreeStore} from '../modules/stores.ts';
+import {ref} from 'vue';
 
-export default {
-  components: {SvgIcon},
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: () => ({
-    store: diffTreeStore(),
-    collapsed: false,
-  }),
-  methods: {
-    getIconForDiffType(pType) {
-      const diffTypes = {
-        1: {name: 'octicon-diff-added', classes: ['text', 'green']},
-        2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
-        3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
-        4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
-        5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
-      };
-      return diffTypes[pType];
-    },
-  },
+type File = {
+  Name: string;
+  NameHash: string;
+  Type: number;
+  IsViewed: boolean;
+}
+
+type Item = {
+  name: string;
+  isFile: boolean;
+  file?: File;
+  children?: Item[];
 };
+
+defineProps<{
+  item: Item,
+}>();
+
+const store = diffTreeStore();
+const collapsed = ref(false);
+
+function getIconForDiffType(pType) {
+  const diffTypes = {
+    1: {name: 'octicon-diff-added', classes: ['text', 'green']},
+    2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
+    3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
+    4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
+    5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
+  };
+  return diffTypes[pType];
+}
 </script>
+
 <template>
   <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
   <a