From 256faa68ad91b2381686c88e1ffbbd468d08cef6 Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Tue, 27 Feb 2024 10:15:48 +0100
Subject: [PATCH]  Enhance language selection in translations interface
 (#21594)

---
 .changeset/brave-jobs-suffer.md                     |  6 ++++++
 app/src/interfaces/translations/language-select.vue | 13 +++++++++++--
 app/src/interfaces/translations/translations.vue    | 11 +++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/brave-jobs-suffer.md

diff --git a/.changeset/brave-jobs-suffer.md b/.changeset/brave-jobs-suffer.md
new file mode 100644
index 0000000000..00c14ebdd3
--- /dev/null
+++ b/.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
diff --git a/app/src/interfaces/translations/language-select.vue b/app/src/interfaces/translations/language-select.vue
index 7dbf027204..0ef4ba2610 100644
--- a/app/src/interfaces/translations/language-select.vue
+++ b/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;
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index be2517885f..ce038458df 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/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>