From 4bd4e4ed1bd1661e3e65ce092c6a7556e620b91b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 6 Aug 2020 15:40:34 -0400
Subject: [PATCH 1/3] Unbind tooltip on change to falsey value

---
 app/src/directives/tooltip/tooltip.ts | 37 +++++++++++++++++----------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/src/directives/tooltip/tooltip.ts b/app/src/directives/tooltip/tooltip.ts
index ffeab207de..9a4265b13d 100644
--- a/app/src/directives/tooltip/tooltip.ts
+++ b/app/src/directives/tooltip/tooltip.ts
@@ -4,20 +4,31 @@ import { nanoid } from 'nanoid';
 
 const handlers: Record<string, () => void> = {};
 
+
+function bind(element: HTMLElement, binding: DirectiveBinding) {
+	element.dataset.tooltip = nanoid();
+	handlers[element.dataset.tooltip] = createEnterHandler(element, binding);
+	element.addEventListener('mouseenter', handlers[element.dataset.tooltip]);
+	element.addEventListener('mouseleave', onLeaveTooltip);
+}
+
+function unbind(element: HTMLElement) {
+	element.removeEventListener('mouseenter', handlers[element.dataset.tooltip as string]);
+	element.removeEventListener('mouseleave', onLeaveTooltip);
+	clearTimeout(tooltipTimer);
+	const tooltip = getTooltip();
+	tooltip.classList.remove('visible');
+	delete handlers[element.dataset.tooltip as string];
+}
+
 const Tooltip: DirectiveOptions = {
-	bind(element, binding) {
-		element.dataset.tooltip = nanoid();
-		handlers[element.dataset.tooltip] = createEnterHandler(element, binding);
-		element.addEventListener('mouseenter', handlers[element.dataset.tooltip]);
-		element.addEventListener('mouseleave', onLeaveTooltip);
-	},
-	unbind(element) {
-		element.removeEventListener('mouseenter', handlers[element.dataset.tooltip as string]);
-		element.removeEventListener('mouseleave', onLeaveTooltip);
-		clearTimeout(tooltipTimer);
-		const tooltip = getTooltip();
-		tooltip.classList.remove('visible');
-		delete handlers[element.dataset.tooltip as string];
+	bind, unbind,
+	update(element, binding) {
+		if (binding.value && !binding.oldValue) {
+			bind(element, binding);
+		} else if (!binding.value && binding.oldValue) {
+			unbind(element);
+		}
 	}
 };
 

From 2163ed5f8eb0bfa84157c3148a2e28a43e23bc9b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 6 Aug 2020 15:42:30 -0400
Subject: [PATCH 2/3] Add tooltips to collections browse

---
 app/src/modules/collections/routes/browse/browse.vue        | 6 +++---
 .../views/private/components/search-input/search-input.vue  | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/src/modules/collections/routes/browse/browse.vue b/app/src/modules/collections/routes/browse/browse.vue
index 4669e533b4..6e41911f3d 100644
--- a/app/src/modules/collections/routes/browse/browse.vue
+++ b/app/src/modules/collections/routes/browse/browse.vue
@@ -48,7 +48,7 @@
 
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" @click="on">
+					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -67,11 +67,11 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
+			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink" v-tooltip.bottom="$t('edit')">
 				<v-icon name="edit" />
 			</v-button>
 
-			<v-button rounded icon :to="addNewLink">
+			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('add_new')">
 				<v-icon name="add" />
 			</v-button>
 		</template>
diff --git a/app/src/views/private/components/search-input/search-input.vue b/app/src/views/private/components/search-input/search-input.vue
index f0643787ef..3d3bb1a3a0 100644
--- a/app/src/views/private/components/search-input/search-input.vue
+++ b/app/src/views/private/components/search-input/search-input.vue
@@ -4,6 +4,7 @@
 		:class="{ active, 'has-content': !!value }"
 		v-click-outside="disable"
 		@click="active = true"
+		v-tooltip.bottom="active ? null : $t('search')"
 	>
 		<v-icon name="search" />
 		<input ref="input" :value="value" @input="emitValue" />

From 50c5a66bba9d53b8eb3512bed75f344927023613 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 6 Aug 2020 16:06:01 -0400
Subject: [PATCH 3/3] Add tooltips to save buttons

---
 app/.eslintrc.js                              |  1 +
 app/src/composables/use-item/use-item.ts      |  2 +-
 .../interfaces/many-to-one/many-to-one.vue    |  2 +-
 app/src/lang/en-US/index.json                 |  4 ++++
 .../collections/composables/use-navigation.ts |  4 ++--
 .../browse-or-detail/browse-or-detail.vue     |  2 +-
 .../collections/routes/detail/detail.vue      |  2 +-
 .../components/add-folder/add-folder.vue      |  2 +-
 .../modules/files/routes/browse/browse.vue    |  8 ++++----
 .../modules/files/routes/detail/detail.vue    |  8 ++++----
 .../data-model/collections/collections.vue    | 20 +++++++++----------
 .../routes/data-model/fields/fields.vue       |  8 ++++----
 .../settings/routes/presets/browse/browse.vue |  4 ++--
 .../settings/routes/presets/detail/detail.vue |  4 ++--
 .../settings/routes/project/project.vue       |  2 +-
 .../settings/routes/roles/browse/browse.vue   |  2 +-
 .../settings/routes/roles/detail/detail.vue   |  4 ++--
 .../modules/users/routes/browse/browse.vue    |  4 ++--
 .../modules/users/routes/detail/detail.vue    |  4 ++--
 app/src/stores/collections/collections.ts     | 10 +++++-----
 app/src/stores/collections/types.ts           |  4 ++--
 app/src/styles/_tooltip.scss                  |  2 +-
 22 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 29b594145a..99482da666 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
 		'@typescript-eslint/no-use-before-define': 0,
 		'@typescript-eslint/ban-ts-ignore': 0,
 		'@typescript-eslint/no-explicit-any': 0,
+		'vue/valid-v-slot': 0,
 		'comma-dangle': [
 			'error',
 			{
diff --git a/app/src/composables/use-item/use-item.ts b/app/src/composables/use-item/use-item.ts
index dc1a141f65..d9d3d31fba 100644
--- a/app/src/composables/use-item/use-item.ts
+++ b/app/src/composables/use-item/use-item.ts
@@ -17,7 +17,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 	const edits = ref({});
 	const isNew = computed(() => primaryKey.value === '+');
 	const isBatch = computed(() => typeof primaryKey.value === 'string' && primaryKey.value.includes(','));
-	const isSingle = computed(() => !!collectionInfo.value?.system?.single);
+	const isSingle = computed(() => !!collectionInfo.value?.meta?.single);
 
 	const endpoint = computed(() => {
 		return collection.value.startsWith('directus_')
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 63a010e750..985f885671 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -361,7 +361,7 @@ export default defineComponent({
 		function usePreview() {
 			const displayTemplate = computed(() => {
 				if (props.template !== null) return props.template;
-				return collectionInfo.value?.system?.display_template;
+				return collectionInfo.value?.meta?.display_template;
 			});
 
 			const requiredFields = computed(() => {
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 640e36db78..979f669f6e 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -10,6 +10,10 @@
 	"only_show_the_file_extension": "Only show the file extension",
 	"textarea": "Textarea",
 
+	"add_preset": "Add Preset",
+	"add_role": "Add Role",
+	"add_user": "Add User",
+
 	"uploaded_by": "Uploaded By",
 	"hide_field_on_detail": "Hide Field on Detail",
 	"show_field_on_detail": "Show Field on Detail",
diff --git a/app/src/modules/collections/composables/use-navigation.ts b/app/src/modules/collections/composables/use-navigation.ts
index 039d603c17..4607d21ee5 100644
--- a/app/src/modules/collections/composables/use-navigation.ts
+++ b/app/src/modules/collections/composables/use-navigation.ts
@@ -38,7 +38,7 @@ export default function useNavigation() {
 						const navItem: NavItem = {
 							collection: collection,
 							name: collectionInfo.name,
-							icon: collectionInfo.system?.icon || 'box',
+							icon: collectionInfo.meta?.icon || 'box',
 							to: `/collections/${collection}`,
 						};
 
@@ -57,7 +57,7 @@ export default function useNavigation() {
 				const navItem: NavItem = {
 					collection: collection.collection,
 					name: collection.name,
-					icon: collection.system?.icon || 'box',
+					icon: collection.meta?.icon || 'box',
 					to: `/collections/${collection.collection}`,
 				};
 
diff --git a/app/src/modules/collections/routes/browse-or-detail/browse-or-detail.vue b/app/src/modules/collections/routes/browse-or-detail/browse-or-detail.vue
index 4029d54ab5..4027ec97c7 100644
--- a/app/src/modules/collections/routes/browse-or-detail/browse-or-detail.vue
+++ b/app/src/modules/collections/routes/browse-or-detail/browse-or-detail.vue
@@ -26,7 +26,7 @@ export default defineComponent({
 
 		const isSingle = computed(() => {
 			const collectionInfo = collectionsStore.getCollection(props.collection);
-			return !!collectionInfo?.system?.single === true;
+			return !!collectionInfo?.meta?.single === true;
 		});
 
 		return { component, isSingle };
diff --git a/app/src/modules/collections/routes/detail/detail.vue b/app/src/modules/collections/routes/detail/detail.vue
index 8ab1973cd7..3f5dfbeeef 100644
--- a/app/src/modules/collections/routes/detail/detail.vue
+++ b/app/src/modules/collections/routes/detail/detail.vue
@@ -105,7 +105,7 @@
 
 				<template #append-outer>
 					<save-options
-						v-if="collectionInfo.single === false"
+						v-if="collectionInfo.single !== true"
 						:disabled="hasEdits === false"
 						@save-and-stay="saveAndStay"
 						@save-and-add-new="saveAndAddNew"
diff --git a/app/src/modules/files/components/add-folder/add-folder.vue b/app/src/modules/files/components/add-folder/add-folder.vue
index 06062ee94e..0998232959 100644
--- a/app/src/modules/files/components/add-folder/add-folder.vue
+++ b/app/src/modules/files/components/add-folder/add-folder.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-dialog v-model="dialogActive">
 		<template #activator="{ on }">
-			<v-button rounded icon class="add-new" @click="on">
+			<v-button rounded icon class="add-new" @click="on" v-tooltip.bottom="$t('add_new_folder')">
 				<v-icon name="create_new_folder" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/files/routes/browse/browse.vue b/app/src/modules/files/routes/browse/browse.vue
index 1c7db4aa95..cab6f73ed8 100644
--- a/app/src/modules/files/routes/browse/browse.vue
+++ b/app/src/modules/files/routes/browse/browse.vue
@@ -17,7 +17,7 @@
 
 			<v-dialog v-model="moveToDialogActive" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button rounded icon @click="on" class="folder">
+					<v-button rounded icon @click="on" class="folder" v-tooltip.bottom="$t('move_to_folder')">
 						<v-icon name="folder_move" />
 					</v-button>
 				</template>
@@ -42,7 +42,7 @@
 
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" @click="on">
+					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -61,11 +61,11 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
+			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink" v-tooltip.bottom="$t('edit')">
 				<v-icon name="edit" />
 			</v-button>
 
-			<v-button rounded icon class="add-new" to="/files/+">
+			<v-button rounded icon class="add-new" to="/files/+" v-tooltip.bottom="$t('add_new_file')">
 				<v-icon name="add" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/files/routes/detail/detail.vue b/app/src/modules/files/routes/detail/detail.vue
index 78350eda55..95aa77f6c4 100644
--- a/app/src/modules/files/routes/detail/detail.vue
+++ b/app/src/modules/files/routes/detail/detail.vue
@@ -14,7 +14,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -35,7 +35,7 @@
 
 			<v-dialog v-model="moveToDialogActive" v-if="isNew === false">
 				<template #activator="{ on }">
-					<v-button rounded icon :disabled="item === null" @click="on" class="folder">
+					<v-button rounded icon :disabled="item === null" @click="on" class="folder" v-tooltip.bottom="$t('move_to_folder')">
 						<v-icon name="folder_move" />
 					</v-button>
 				</template>
@@ -58,11 +58,11 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button v-if="item && item.type.includes('image')" rounded icon @click="editActive = true" class="edit">
+			<v-button v-if="item && item.type.includes('image')" rounded icon @click="editActive = true" class="edit" v-tooltip.bottom="$t('edit')">
 				<v-icon name="tune" />
 			</v-button>
 
-			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit" v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 
 				<template #append-outer>
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 54af9e7434..55bf100952 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-button rounded icon to="/settings/data-model/+">
+			<v-button rounded icon to="/settings/data-model/+" v-tooltip.bottom="$t('create_collection')">
 				<v-icon name="add" />
 			</v-button>
 		</template>
@@ -41,7 +41,7 @@
 						class="icon"
 						:class="{
 							hidden: item.hidden,
-							system: item.collection.startsWith('directus_'),
+							meta: item.collection.startsWith('directus_'),
 							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
 						:name="item.icon"
@@ -53,7 +53,7 @@
 						class="collection"
 						:class="{
 							hidden: item.hidden,
-							system: item.collection.startsWith('directus_'),
+							meta: item.collection.startsWith('directus_'),
 							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
 					>
@@ -144,7 +144,7 @@ export default defineComponent({
 				return sortBy(
 					collectionsStore.state.collections.filter(
 						(collection) =>
-							collection.collection.startsWith('directus_') === false && collection.system?.hidden === false
+							collection.collection.startsWith('directus_') === false && collection.meta?.hidden === false
 					),
 					'collection'
 				);
@@ -155,14 +155,14 @@ export default defineComponent({
 					collectionsStore.state.collections
 						.filter(
 							(collection) =>
-								collection.collection.startsWith('directus_') === false && collection.system?.hidden === true
+								collection.collection.startsWith('directus_') === false && collection.meta?.hidden === true
 						)
 						.map((collection) => ({ ...collection, icon: 'visibility_off' })),
 					'collection'
 				);
 			});
 
-			const system = computed(() => {
+			const meta = computed(() => {
 				return sortBy(
 					collectionsStore.state.collections
 						.filter((collection) => collection.collection.startsWith('directus_') === true)
@@ -175,7 +175,7 @@ export default defineComponent({
 				return sortBy(
 					collectionsStore.state.collections
 						.filter((collection) => collection.collection.startsWith('directus_') === false)
-						.filter((collection) => collection.system === null),
+						.filter((collection) => collection.meta === null),
 					'collection'
 				);
 			});
@@ -195,8 +195,8 @@ export default defineComponent({
 					items.push(unmanaged.value);
 				}
 
-				if (activeTypes.value.includes('system')) {
-					items.push(system.value);
+				if (activeTypes.value.includes('meta')) {
+					items.push(meta.value);
 				}
 
 				return items.flat();
@@ -217,7 +217,7 @@ export default defineComponent({
 	color: var(--foreground-subdued);
 }
 
-.system {
+.meta {
 	color: var(--primary);
 }
 
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index 482bf59a5f..afeef7e008 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -10,7 +10,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on" v-tooltip.bottom="$t('delete_collection')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -29,7 +29,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit" v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 			</v-button>
 		</template>
@@ -52,10 +52,10 @@
 			<v-form
 				collection="directus_collections"
 				:loading="loading"
-				:initial-values="item && item.system"
+				:initial-values="item && item.meta"
 				:batch-mode="isBatch"
 				:primary-key="collection"
-				v-model="edits.system"
+				v-model="edits.meta"
 			/>
 		</div>
 
diff --git a/app/src/modules/settings/routes/presets/browse/browse.vue b/app/src/modules/settings/routes/presets/browse/browse.vue
index 307525e805..a052721c85 100644
--- a/app/src/modules/settings/routes/presets/browse/browse.vue
+++ b/app/src/modules/settings/routes/presets/browse/browse.vue
@@ -11,7 +11,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" @click="on">
+					<v-button rounded icon class="action-delete" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -30,7 +30,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon :to="addNewLink">
+			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('add_preset')">
 				<v-icon name="add" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/settings/routes/presets/detail/detail.vue b/app/src/modules/settings/routes/presets/detail/detail.vue
index fdfc5bd056..e12574b644 100644
--- a/app/src/modules/settings/routes/presets/detail/detail.vue
+++ b/app/src/modules/settings/routes/presets/detail/detail.vue
@@ -14,7 +14,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" :disabled="preset === null || id === '+'" @click="on">
+					<v-button rounded icon class="action-delete" :disabled="preset === null || id === '+'" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -33,7 +33,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button icon rounded :disabled="hasEdits === false" :loading="saving" @click="save">
+			<v-button icon rounded :disabled="hasEdits === false" :loading="saving" @click="save" v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/settings/routes/project/project.vue b/app/src/modules/settings/routes/project/project.vue
index ea2c4829df..a52c0d1e54 100644
--- a/app/src/modules/settings/routes/project/project.vue
+++ b/app/src/modules/settings/routes/project/project.vue
@@ -8,7 +8,7 @@
 		</template>
 
 		<template #actions>
-			<v-button icon rounded :disabled="noEdits" :loading="saving" @click="save">
+			<v-button icon rounded :disabled="noEdits" :loading="saving" @click="save" v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/settings/routes/roles/browse/browse.vue b/app/src/modules/settings/routes/roles/browse/browse.vue
index 382a4caba1..3effc589b2 100644
--- a/app/src/modules/settings/routes/roles/browse/browse.vue
+++ b/app/src/modules/settings/routes/roles/browse/browse.vue
@@ -9,7 +9,7 @@
 		</template>
 
 		<template #actions>
-			<v-button rounded icon :to="addNewLink">
+			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('add_role')">
 				<v-icon name="add" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/settings/routes/roles/detail/detail.vue b/app/src/modules/settings/routes/roles/detail/detail.vue
index 54e693da4f..1a763d9f07 100644
--- a/app/src/modules/settings/routes/roles/detail/detail.vue
+++ b/app/src/modules/settings/routes/roles/detail/detail.vue
@@ -9,7 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete" v-if="[1, 2].includes(+primaryKey) === false">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -28,7 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit" v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 
 				<template #append-outer>
diff --git a/app/src/modules/users/routes/browse/browse.vue b/app/src/modules/users/routes/browse/browse.vue
index 3005a664d6..529e2fa2ce 100644
--- a/app/src/modules/users/routes/browse/browse.vue
+++ b/app/src/modules/users/routes/browse/browse.vue
@@ -34,11 +34,11 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
+			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink" v-tooltip.bottom="$t('edit')">
 				<v-icon name="edit" />
 			</v-button>
 
-			<v-button rounded icon :to="addNewLink">
+			<v-button rounded icon :to="addNewLink" v-tooltip.bottom="$t('add_user')">
 				<v-icon name="add" />
 			</v-button>
 		</template>
diff --git a/app/src/modules/users/routes/detail/detail.vue b/app/src/modules/users/routes/detail/detail.vue
index a5efa1df30..68fcb3a4a1 100644
--- a/app/src/modules/users/routes/detail/detail.vue
+++ b/app/src/modules/users/routes/detail/detail.vue
@@ -13,7 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on" v-tooltip.bottom="$t('delete')">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -32,7 +32,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit" v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 
 				<template #append-outer>
diff --git a/app/src/stores/collections/collections.ts b/app/src/stores/collections/collections.ts
index f777559975..16a09b56f3 100644
--- a/app/src/stores/collections/collections.ts
+++ b/app/src/stores/collections/collections.ts
@@ -16,7 +16,7 @@ export const useCollectionsStore = createStore({
 		visibleCollections: (state) => {
 			return state.collections
 				.filter(({ collection }) => collection.startsWith('directus_') === false)
-				.filter(collection => collection.system?.hidden !== true);
+				.filter(collection => collection.meta?.hidden !== true);
 		},
 	},
 	actions: {
@@ -27,11 +27,11 @@ export const useCollectionsStore = createStore({
 
 			this.state.collections = collections.map((collection: CollectionRaw) => {
 				let name: string | VueI18n.TranslateResult;
-				const icon = collection.system?.icon || 'box';
+				const icon = collection.meta?.icon || 'box';
 
-				if (collection.system && notEmpty(collection.system.translation)) {
-					for (let i = 0; i < collection.system.translation.length; i++) {
-						const { locale, translation } = collection.system.translation[i];
+				if (collection.meta && notEmpty(collection.meta.translation)) {
+					for (let i = 0; i < collection.meta.translation.length; i++) {
+						const { locale, translation } = collection.meta.translation[i];
 
 						i18n.mergeLocaleMessage(locale, {
 							collections: {
diff --git a/app/src/stores/collections/types.ts b/app/src/stores/collections/types.ts
index 52ba2a60cb..b22a279376 100644
--- a/app/src/stores/collections/types.ts
+++ b/app/src/stores/collections/types.ts
@@ -7,7 +7,7 @@ type Translation = {
 
 export interface CollectionRaw {
 	collection: string;
-	system: {
+	meta: {
 		note: string | null;
 		hidden: boolean;
 		single: boolean;
@@ -16,7 +16,7 @@ export interface CollectionRaw {
 		translation: Translation[] | null;
 		display_template: string | null;
 	} | null;
-	database: Record<string, any>;
+	schema: Record<string, any>;
 }
 
 export interface Collection extends CollectionRaw {
diff --git a/app/src/styles/_tooltip.scss b/app/src/styles/_tooltip.scss
index 14bc06bca5..eaf6eab835 100644
--- a/app/src/styles/_tooltip.scss
+++ b/app/src/styles/_tooltip.scss
@@ -7,7 +7,7 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: 500;
+	z-index: 475;
 	display: none;
 	max-width: 260px;
 	padding: 4px 8px;