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

Code before:
		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"
					@click="switchVersion(versionItem)"
				>

Review comment (suggestion):
This could be simplified by just passing the `small` prop. Then the `.version-icon` class can be removed (also in the styles below). Also, I think we should use the same icon that is used in the collection settings (`published_with_changes`).

```suggestion
						<v-icon small name="published_with_changes" />
```

Code after:
		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>

				<template v-if="createVersionsAllowed">