Repository: directus/directus
File: app/src/modules/content/components/version-menu.vue (Vue)

Code before:
	async function onDeleteVersion() {
		await deleteVersion();
		deleteDialogActive.value = false;
	}
}

function getVersionDisplayName(version: ContentVersion) {
	return isNil(version.name) ? version.key : version.name;
}

async function onPromoteComplete(deleteOnPromote: boolean) {
	isVersionPromoteDrawerOpen.value = false;

	if (deleteOnPromote) {
		await deleteVersion();
	} else {
		emit('switch', null);
	}
}
</script>

<template>
	<div class="version-menu-wrapper">
		<v-menu class="version-menu" placement="bottom-start" show-arrow>
			<template #activator="{ toggle }">
				<button secondary rounded class="version-button" :class="{ main: currentVersion === null }" @click="toggle">
					<div class="version-current">
						<v-icon class="version-icon" name="history" />
						<span class="version-name">
							<v-text-overflow
								:text="currentVersion ? getVersionDisplayName(currentVersion) : t('main_version')"
								placement="bottom"
							/>
						</span>

						<v-icon small name="arrow_drop_down" />
					</div>
				</button>
			</template>

			<v-list>
				<v-list-item class="version-item" clickable :active="currentVersion === null" @click="switchVersion(null)">
					{{ t('main_version') }}
				</v-list-item>

				<v-list-item
					v-for="versionItem of versions"
					:key="versionItem.id"
					class="version-item"
					clickable
					:active="versionItem.id === currentVersion?.id"

Review comment (suggestion):
The props `secondary` and `rounded` props can be removed. If we don’t use different styles for the button on the main version, we can remove the `.main` class here as well. Since we are using a button element here, we should add a `type="button"`.

```suggestion
				<button class="version-button" type="button" @click="toggle">
```

Code after:
	async function onDeleteVersion() {
		await deleteVersion();
		deleteDialogActive.value = false;
	}
}

function getVersionDisplayName(version: ContentVersion) {
	return isNil(version.name) ? version.key : version.name;
}

async function onPromoteComplete(deleteOnPromote: boolean) {
	isVersionPromoteDrawerOpen.value = false;

	if (deleteOnPromote) {
		await deleteVersion();
	} else {
		emit('switch', null);
	}
}
</script>

<template>
	<div class="version-menu-wrapper">
		<v-menu class="version-menu" placement="bottom-start" show-arrow>
			<template #activator="{ toggle }">
				<button class="version-button" type="button" @click="toggle">
					<v-icon name="published_with_changes" />
					<v-text-overflow
						class="version-name"
						:text="currentVersion ? getVersionDisplayName(currentVersion) : t('main_version')"
						placement="bottom"
					/>
					<v-icon small name="arrow_drop_down" />
				</button>
			</template>

			<v-list>
				<v-list-item class="version-item" clickable :active="currentVersion === null" @click="switchVersion(null)">
					{{ t('main_version') }}
				</v-list-item>

				<v-list-item
					v-for="versionItem of versions"
					:key="versionItem.id"
					class="version-item"
					clickable
					:active="versionItem.id === currentVersion?.id"
					@click="switchVersion(versionItem)"
				>
					{{ getVersionDisplayName(versionItem) }}
				</v-list-item>