Make GitAction.title async internally (#169)

Author: phil294

src/global.d.ts

@@ -116,6 +116,7 @@ interface GitAction extends ConfigGitAction {
 	/** Set empty string to disable */
 	storage_key: string
 	params: () => Promise<GitActionParam[]>
+	title: () => Promise<string>
 }
 
 interface HistoryEntry {

tsconfig.base.json

@@ -12,7 +12,6 @@
     "outDir": "/dev/null",
     "skipLibCheck": true,
     "baseUrl": ".",
-    "types": ["vite/client"],
     "moduleResolution": "bundler",
     "module": "ESNext",
     "target": "ESNext",

web/src/components/GitActionButton.vue

@@ -4,23 +4,25 @@
 		<div v-if="git_action.icon" class="icon center">
 			<i :class="'codicon-'+git_action.icon" class="codicon" />
 		</div>
-		<div v-if="git_action.title" class="title">
-			{{ git_action.title }}
+		<div v-if="title" class="title">
+			{{ title }}
 		</div>
 	</button>
 </template>
 <script setup>
 import { selected_git_action } from '../data/store'
+import vue_resolved from '../utils/vue-resolved'
 defineOptions({
 	inheritAttrs: false,
 })
-defineProps({
+let props = defineProps({
 	git_action: {
 		/** @type {Vue.PropType<GitAction>} */
 		type: Object,
 		required: true,
 	},
 })
+let title = vue_resolved(props.git_action.title())
 </script>
 <style>
 

web/src/components/RefTip.vue

@@ -77,7 +77,7 @@ let context_menu_provider = computed(() => () => {
 	if (branch.value)
 		return to_context_menu_entries(branch_actions(branch.value).value)
 			.concat({
-				label: 'Show',
+				label: () => Promise.resolve('Show'),
 				icon: 'eye',
 				action() {
 					if (branch.value)

web/src/data/store/actions.js

@@ -24,7 +24,7 @@ function apply_action_replacements(actions, replacements = []) {
 		, Promise.resolve(txt))
 	return actions.map(action => ({
 		...action,
-		title: apply_string_replacements(action.title),
+		title: () => apply_promise_replacements(apply_string_replacements(action.title || '')),
 		description: apply_string_replacements(action.description || ''),
 		// This should better also include the action placement (global, branch, stash, ...),
 		// also 'global' vs. replacements doesn't make any sense in namespace.

web/src/data/store/repo.js

@@ -48,7 +48,7 @@ export let log_action = {
 	storage_key: 'main-log',
 	immediate: false,
 	params: () => Promise.resolve([]),
-	title: '',
+	title: () => Promise.resolve(''),
 }
 
 /** `fetch_branches` should be true usually because otherwise branch data is missing such as tracking_remote_names */

web/src/directives/context-menu.js

@@ -1,4 +1,4 @@
-/** @typedef {{label:string,icon?:string,action:()=>any}} ContextMenuEntry */
+/** @typedef {{label:()=>Promise<string>,icon?:string,action:()=>any}} ContextMenuEntry */
 /**
 @typedef {{
 	oncontextmenu: (this: HTMLElement, ev: MouseEvent) => any
@@ -57,7 +57,7 @@ function set_context_menu(/** @type {HTMLElement} */ el, /** @type {(ev: MouseEv
 	let wrapper_el = null
 
 	// The element(s) created by this is quite similar to the template of <git-action-button>
-	function build_context_menu(/** @type {MouseEvent} */ event) {
+	async function build_context_menu(/** @type {MouseEvent} */ event) {
 		let entries = entries_provider(event)
 		if (! entries || wrapper_el)
 			return
@@ -66,7 +66,7 @@ function set_context_menu(/** @type {HTMLElement} */ el, /** @type {(ev: MouseEv
 		wrapper_el.classList.add('context-menu-wrapper')
 		wrapper_el.style.setProperty('left', event.clientX + 'px')
 		wrapper_el.style.setProperty('top', event.clientY + 'px')
-		entries.forEach((entry) => {
+		for (let entry of entries) {
 			let entry_el = document.createElement('li')
 			entry_el.setAttribute('role', 'button')
 			entry_el.setAttribute('tabindex', '-1')
@@ -75,15 +75,15 @@ function set_context_menu(/** @type {HTMLElement} */ el, /** @type {(ev: MouseEv
 			if (entry.icon)
 				icon_el.classList.add('codicon', `codicon-${entry.icon}`)
 			let label_el = document.createElement('span')
-			label_el.textContent = entry.label
+			label_el.textContent = await entry.label()
 			entry_el.appendChild(icon_el)
 			entry_el.appendChild(label_el)
 			entry_el.onfocus = () => {
 				entry.action()
 				remove_all_context_menus()
 			}
 			wrapper_el?.appendChild(entry_el)
-		})
+		}
 		document.body.appendChild(wrapper_el)
 	}
 

web/src/utils/vue-resolved.js

@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+
+export default (/** @type {Promise<any> | undefined} */ promise) => {
+	if (! promise)
+		return ''
+	let resolved = ref('Loading...')
+	promise.then(v => resolved.value = v)
+	return resolved
+}

web/src/views/main-view/History.vue

@@ -56,7 +56,7 @@ let history_mapped = computed(() =>
 			? filtered_commits.value?.find((commit) =>
 				commit.hash === entry.value) : undefined,
 		git_action: entry.type === 'git' ? {
-			title: 'git ' + entry.value,
+			title: () => Promise.resolve('git ' + entry.value),
 			args: entry.value,
 			description: 'History entry',
 			icon: 'history',

web/src/views/main-view/SelectedGitAction.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="selected-git-action">
 		<h2>
-			<template v-if="selected_git_action?.title">
-				{{ selected_git_action.title }} -&nbsp;
+			<template v-if="title">
+				{{ title }} -&nbsp;
 			</template>
 			{{ selected_git_action?.description }}
 		</h2>
@@ -23,13 +23,15 @@
 <script setup>
 import { ref } from 'vue'
 import { selected_git_action, trigger_main_refresh } from '../../data/store'
+import vue_resolved from '../../utils/vue-resolved'
 
 let keep_open = ref(false)
 
 function success() {
 	if (! keep_open.value)
 		selected_git_action.value = null
 }
+let title = vue_resolved(selected_git_action.value?.title())
 </script>
 <style>
 .selected-git-action {