Enhance language selection in translations interface (#21594)

.changeset/brave-jobs-suffer.md

@@ -0,0 +1,6 @@
+---
+'@directus/app': patch
+---
+
+Enhanced the language selection in translations interface by switching open/close icon and closing dropdown when
+toggling split view

app/src/interfaces/translations/language-select.vue

@@ -26,8 +26,8 @@ const displayValue = computed(() => {
 			<button class="toggle" @click="toggle">
 				<v-icon class="translate" name="translate" />
 				<span class="display-value">{{ displayValue }}</span>
-				<v-icon name="expand_more" :class="{ active }" />
-				<span class="append-slot"><slot name="append" /></span>
+				<v-icon class="expand" name="expand_more" :class="{ active }" />
+				<span class="append-slot"><slot name="append" :active="active" :toggle="toggle" /></span>
 			</button>
 		</template>
 
@@ -65,6 +65,15 @@ const displayValue = computed(() => {
 	background-color: var(--theme--primary-background);
 	border-radius: var(--theme--border-radius);
 
+	.expand {
+		transition: transform var(--medium) var(--transition-out);
+	}
+
+	.expand.active {
+		transform: scaleY(-1);
+		transition-timing-function: var(--transition-in);
+	}
+
 	.display-value {
 		flex-grow: 1;
 		margin-left: 8px;

app/src/interfaces/translations/translations.vue

@@ -26,7 +26,7 @@ const props = withDefaults(
 		defaultLanguage?: string | null;
 		defaultOpenSplitView?: boolean;
 		userLanguage?: boolean;
-		value: (number | string | Record<string, any>)[] | Record<string, any>;
+		value: (number | string | Record<string, any>)[] | Record<string, any> | null;
 		autofocus?: boolean;
 		disabled?: boolean;
 	}>(),
@@ -285,13 +285,16 @@ const {
 	<div class="translations" :class="{ split: splitViewEnabled }">
 		<div class="primary" :class="splitViewEnabled ? 'half' : 'full'">
 			<language-select v-if="showLanguageSelect" v-model="firstLang" :items="languageOptions">
-				<template #append>
+				<template #append="{ active, toggle }">
 					<v-icon
 						v-if="splitViewAvailable && !splitViewEnabled"
 						v-tooltip="t('interfaces.translations.toggle_split_view')"
 						name="flip"
 						clickable
-						@click.stop="splitView = true"
+						@click.stop="
+							if (active) toggle();
+							splitView = true;
+						"
 					/>
 				</template>
 			</language-select>
@@ -323,7 +326,7 @@ const {
 						v-tooltip="t('interfaces.translations.toggle_split_view')"
 						name="close"
 						clickable
-						@click.stop="splitView = !splitView"
+						@click="splitView = false"
 					/>
 				</template>
 			</language-select>