Add new translations interface (#7727)

* added v-select and button to start sidebyside view

* v-chip next to field name on translations

* v-chip color changed

* add baisc logic

* finish inner workings of translation interface

* finish design

* clean up code

* remove unused prop

* small tweaks

* finish translation interface

* fix lang icon

* tweak styling

* Use v-model over separate bind+event

* Tweak margin definition

* Add class to field-name to prevent span confusion

* Rename classes to match var names

* Add limit -1, remove commented code

* Tweak toggle tooltip wording

* Add hover state to v-icons

* Use self-closing elements

* Remove unused imports

* Rename newVal->sideBySideEnabled

* Use filter + length instead of reducer

* Fix param typo

* Move dividers into main translations component

* Base initial language on fetched languages array

* Move styling to language-select, simplify component

* Don't rely on deep styling

* Tweak interactive state of chip

* Use existing form-grid for side-by-side layoutin

* Only fetch preview values when we dont have them yet

* Improve stability of edited status

* Fix hover state of v-icon

Co-authored-by: Nitwel <nitwel@arcor.de>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/components/v-select/v-select.vue

@@ -23,7 +23,10 @@
 				@click="toggle"
 			>
 				<template v-if="$slots.prepend" #prepend><slot name="prepend" /></template>
-				<template #append><v-icon name="expand_more" :class="{ active }" /></template>
+				<template #append>
+					<v-icon name="expand_more" :class="{ active }" />
+					<slot name="append" />
+				</template>
 			</v-input>
 		</template>