From a570d75d53d5bff1a794dbed881e2bb89eecbd25 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 15:16:16 -0400
Subject: [PATCH 01/19] Add system-language interface, add field translations
 widget

---
 api/src/database/seeds/system.yaml            |  6 ++--
 app/src/interfaces/system-language/index.ts   | 12 ++++++++
 .../system-language/system-language.vue       | 29 +++++++++++++++++++
 .../field-detail/components/schema.vue        | 28 ++++++++++++++++++
 4 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 app/src/interfaces/system-language/index.ts
 create mode 100644 app/src/interfaces/system-language/system-language.vue

diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index e0be01d795..8b5802dad2 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -637,12 +637,10 @@ rows:
           template: '{{ locale }}'
           fields:
           - field: locale
-            name: Locale
+            name: Language
             type: string
             meta:
-              interface: language
-              options:
-                limit: true
+              interface: system-language
               width: half
           - field: translation
             name: Translation
diff --git a/app/src/interfaces/system-language/index.ts b/app/src/interfaces/system-language/index.ts
new file mode 100644
index 0000000000..ff67cfdf90
--- /dev/null
+++ b/app/src/interfaces/system-language/index.ts
@@ -0,0 +1,12 @@
+import InterfaceSystemLanguage from './system-language.vue';
+import { defineInterface } from '@/interfaces/define';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'system-language',
+	name: i18n.t('language'),
+	icon: 'translate',
+	component: InterfaceSystemLanguage,
+	system: true,
+	types: ['string'],
+	options: [],
+}));
diff --git a/app/src/interfaces/system-language/system-language.vue b/app/src/interfaces/system-language/system-language.vue
new file mode 100644
index 0000000000..b2779412b6
--- /dev/null
+++ b/app/src/interfaces/system-language/system-language.vue
@@ -0,0 +1,29 @@
+<template>
+	<v-select @input="$listeners.input" :value="value" :items="languages" :disabled="disabled" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import { availableLanguages } from '@/lang';
+
+export default defineComponent({
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: String,
+			default: null,
+		},
+	},
+	setup(props) {
+		const languages = Object.entries(availableLanguages).map(([key, value]) => ({
+			text: value,
+			value: key,
+		}));
+
+		return { languages };
+	},
+});
+</script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
index 831f0c67c0..b305d4f771 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -64,6 +64,34 @@
 				<v-checkbox v-model="fieldData.schema.is_nullable" :label="$t('allow_null_label')" block />
 			</div>
 
+			<div class="field full">
+				<div class="label type-label">{{ $t('translation') }}</div>
+				<interface-repeater
+					v-model="fieldData.meta.translation"
+					:template="'{{ locale }}'"
+					:fields="[
+						{
+							field: 'locale',
+							type: 'string',
+							name: $t('language'),
+							meta: {
+								interface: 'system-language',
+								width: 'half',
+							},
+						},
+						{
+							field: 'translation',
+							type: 'string',
+							name: $t('translation'),
+							meta: {
+								interface: 'text-input',
+								width: 'half',
+							},
+						},
+					]"
+				/>
+			</div>
+
 			<!--
 			@todo add unique when the API supports it
 

From 15e86a4efb009fe4d1874ced3d66fa5469f18194 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 16:56:57 -0400
Subject: [PATCH 02/19] Update bookmark editing flow

---
 app/src/composables/use-preset/use-preset.ts  |  19 +++-
 app/src/composables/use-sync/use-sync.ts      |   4 +-
 app/src/layouts/tabular/tabular.vue           |   9 +-
 app/src/modules/collections/routes/browse.vue | 100 +++++++++++-------
 app/src/stores/presets.ts                     |  15 ++-
 app/src/types/presets.ts                      |   5 +-
 6 files changed, 104 insertions(+), 48 deletions(-)

diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts
index 3612230984..24b7e149b3 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -9,26 +9,40 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const presetsStore = usePresetsStore();
 	const userStore = useUserStore();
 
+	const saving = ref(false);
+
 	const { info: collectionInfo } = useCollection(collection);
 
 	const bookmarkExists = computed(() => {
 		if (!bookmark.value) return false;
-
 		return !!presetsStore.state.collectionPresets.find((preset) => preset.id === bookmark.value);
 	});
 
 	const localPreset = ref<Partial<Preset>>({});
 	initLocalPreset();
 
+	const bookmarkSaved = computed(() => localPreset.value.$saved !== false);
+	const bookmarkIsMine = computed(() => localPreset.value.user === userStore.state.currentUser!.id);
+
 	const savePreset = async (preset?: Partial<Preset>) => {
+		saving.value = true;
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
+		initLocalPreset();
 		localPreset.value.id = updatedValues.id;
+		saving.value = false;
 		return updatedValues;
 	};
 
+	const saveLocal = async () => {
+		presetsStore.saveLocal(localPreset.value);
+		initLocalPreset();
+	};
+
 	const autoSave = debounce(async () => {
 		if (!bookmark || bookmark.value === null) {
 			savePreset();
+		} else {
+			saveLocal();
 		}
 	}, 450);
 
@@ -143,6 +157,9 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		saveCurrentAsBookmark,
 		title,
 		resetPreset,
+		bookmarkSaved,
+		bookmarkIsMine,
+		saving,
 	};
 
 	async function resetPreset() {
diff --git a/app/src/composables/use-sync/use-sync.ts b/app/src/composables/use-sync/use-sync.ts
index 7fcdf999f0..21bfc436f0 100644
--- a/app/src/composables/use-sync/use-sync.ts
+++ b/app/src/composables/use-sync/use-sync.ts
@@ -1,15 +1,13 @@
 import { computed, Ref } from '@vue/composition-api';
-import { clone } from 'lodash';
 
 export default function useSync<T, K extends keyof T>(
 	props: T,
 	key: K,
-
 	emit: (event: string, ...args: any[]) => void
 ): Ref<Readonly<T[K]>> {
 	return computed<T[K]>({
 		get() {
-			return clone(props[key]);
+			return props[key];
 		},
 		set(newVal) {
 			emit(`update:${key}`, newVal);
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index ecc1fa5f9c..97f38a1eb9 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -143,7 +143,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { defineComponent, PropType, ref, computed, inject, toRefs, Ref } from '@vue/composition-api';
+import { defineComponent, PropType, ref, computed, inject, toRefs, Ref, watch } from '@vue/composition-api';
 
 import { HeaderRaw, Item } from '@/components/v-table/types';
 import { Field, Filter } from '@/types';
@@ -389,6 +389,13 @@ export default defineComponent({
 
 			const localWidths = ref<{ [field: string]: number }>({});
 
+			watch(
+				() => _viewOptions.value,
+				() => {
+					localWidths.value = {};
+				}
+			);
+
 			const saveWidthsToViewOptions = debounce(() => {
 				_viewOptions.value = {
 					...(_viewOptions.value || {}),
diff --git a/app/src/modules/collections/routes/browse.vue b/app/src/modules/collections/routes/browse.vue
index c525d7cd82..68276244ae 100644
--- a/app/src/modules/collections/routes/browse.vue
+++ b/app/src/modules/collections/routes/browse.vue
@@ -13,30 +13,38 @@
 		</template>
 
 		<template #title-outer:append>
-			<bookmark-add
-				v-if="!bookmark"
-				class="bookmark-add"
-				v-model="bookmarkDialogActive"
-				@save="createBookmark"
-				:saving="creatingBookmark"
-			>
-				<template #activator="{ on }">
-					<v-icon class="toggle" name="bookmark_outline" @click="on" />
-				</template>
-			</bookmark-add>
+			<div class="bookmark-controls">
+				<bookmark-add
+					v-if="!bookmark"
+					class="add"
+					v-model="bookmarkDialogActive"
+					@save="createBookmark"
+					:saving="creatingBookmark"
+				>
+					<template #activator="{ on }">
+						<v-icon class="toggle" name="bookmark_outline" @click="on" />
+					</template>
+				</bookmark-add>
 
-			<bookmark-edit
-				v-else
-				class="bookmark-edit"
-				v-model="bookmarkDialogActive"
-				:saving="editingBookmark"
-				:name="bookmarkName"
-				@save="editBookmark"
-			>
-				<template #activator="{ on }">
-					<v-icon class="toggle" name="bookmark" @click="on" />
+				<v-icon class="saved" name="bookmark" v-else-if="bookmarkSaved" />
+
+				<template v-else-if="bookmarkIsMine">
+					<v-progress-circular indeterminate small v-if="bookmarkSaving" />
+					<v-icon class="save" v-else @click="savePreset()" name="save" />
 				</template>
-			</bookmark-edit>
+
+				<bookmark-add
+					v-else
+					class="add"
+					v-model="bookmarkDialogActive"
+					@save="createBookmark"
+					:saving="creatingBookmark"
+				>
+					<template #activator="{ on }">
+						<v-icon class="toggle" name="bookmark_outline" @click="on" />
+					</template>
+				</bookmark-add>
+			</div>
 		</template>
 
 		<template #actions:prepend>
@@ -277,6 +285,9 @@ export default defineComponent({
 			saveCurrentAsBookmark,
 			title: bookmarkName,
 			resetPreset,
+			bookmarkSaved,
+			bookmarkIsMine,
+			saving: bookmarkSaving,
 		} = usePreset(collection, bookmarkID);
 
 		const {
@@ -345,6 +356,9 @@ export default defineComponent({
 			deleteError,
 			createAllowed,
 			resetPreset,
+			bookmarkSaved,
+			bookmarkIsMine,
+			bookmarkSaving,
 		};
 
 		function useBreadcrumb() {
@@ -559,25 +573,31 @@ export default defineComponent({
 	--layout-offset-top: 64px;
 }
 
-.bookmark-add .toggle,
-.bookmark-edit .toggle {
-	margin-left: 8px;
-	transition: color var(--fast) var(--transition);
-}
-
-.bookmark-add {
-	color: var(--foreground-subdued);
-
-	&:hover {
-		color: var(--foreground-normal);
-	}
-}
-
-.bookmark-edit {
-	color: var(--primary);
-}
-
 .header-icon {
 	--v-button-color-disabled: var(--foreground-normal);
 }
+
+.bookmark-controls {
+	.add,
+	.save,
+	.saved,
+	.v-progress-circular {
+		display: inline-block;
+		margin-left: 8px;
+	}
+
+	.add,
+	.save {
+		color: var(--foreground-subdued);
+		transition: color var(--fast) var(--transition);
+
+		&:hover {
+			color: var(--foreground-normal);
+		}
+	}
+
+	.saved {
+		color: var(--primary);
+	}
+}
 </style>
diff --git a/app/src/stores/presets.ts b/app/src/stores/presets.ts
index ade46fce9f..d00d3e40cc 100644
--- a/app/src/stores/presets.ts
+++ b/app/src/stores/presets.ts
@@ -22,7 +22,6 @@ export const usePresetsStore = createStore({
 	actions: {
 		async hydrate() {
 			// Hydrate is only called for logged in users, therefore, currentUser exists
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			const { id, role } = useUserStore().state.currentUser!;
 
 			const values = await Promise.all([
@@ -65,6 +64,7 @@ export const usePresetsStore = createStore({
 
 			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
 				const updatedPreset = response.data.data;
+
 				if (preset.id === updatedPreset.id) {
 					return updatedPreset;
 				}
@@ -167,5 +167,18 @@ export const usePresetsStore = createStore({
 				return await this.update(id, preset);
 			}
 		},
+
+		async saveLocal(updatedPreset: Preset) {
+			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
+				if (preset.id === updatedPreset.id) {
+					return {
+						...updatedPreset,
+						$saved: false,
+					};
+				}
+
+				return preset;
+			});
+		},
 	},
 });
diff --git a/app/src/types/presets.ts b/app/src/types/presets.ts
index 0635d05598..b06b923c22 100644
--- a/app/src/types/presets.ts
+++ b/app/src/types/presets.ts
@@ -37,8 +37,9 @@ export type Preset = {
 	search_query: string | null;
 	filters: readonly Filter[] | null;
 	view_type: string | null;
-
 	view_query: { [view_type: string]: any } | null;
-
 	view_options: { [view_type: string]: any } | null;
+
+	// App flag to indicate that the local copy hasn't been saved to the API yet
+	$saved?: false;
 };

From 4a8941ea0f261a312aacda4157fc73ca47efc0cb Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 17:20:06 -0400
Subject: [PATCH 03/19] Add clear bookmark changes button

---
 app/src/composables/use-preset/use-preset.ts  | 18 +++++++++++++-----
 app/src/modules/collections/routes/browse.vue | 14 ++++++++++++--
 app/src/stores/presets.ts                     | 15 ++++++++++++++-
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts
index 24b7e149b3..bef17c2505 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -9,7 +9,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const presetsStore = usePresetsStore();
 	const userStore = useUserStore();
 
-	const saving = ref(false);
+	const busy = ref(false);
 
 	const { info: collectionInfo } = useCollection(collection);
 
@@ -25,19 +25,26 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const bookmarkIsMine = computed(() => localPreset.value.user === userStore.state.currentUser!.id);
 
 	const savePreset = async (preset?: Partial<Preset>) => {
-		saving.value = true;
+		busy.value = true;
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
 		initLocalPreset();
 		localPreset.value.id = updatedValues.id;
-		saving.value = false;
+		busy.value = false;
 		return updatedValues;
 	};
 
-	const saveLocal = async () => {
+	const saveLocal = () => {
 		presetsStore.saveLocal(localPreset.value);
 		initLocalPreset();
 	};
 
+	const clearLocalSave = async () => {
+		busy.value = true;
+		await presetsStore.clearLocalSave(localPreset.value);
+		initLocalPreset();
+		busy.value = false;
+	};
+
 	const autoSave = debounce(async () => {
 		if (!bookmark || bookmark.value === null) {
 			savePreset();
@@ -159,7 +166,8 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		resetPreset,
 		bookmarkSaved,
 		bookmarkIsMine,
-		saving,
+		busy,
+		clearLocalSave,
 	};
 
 	async function resetPreset() {
diff --git a/app/src/modules/collections/routes/browse.vue b/app/src/modules/collections/routes/browse.vue
index 68276244ae..a108283db1 100644
--- a/app/src/modules/collections/routes/browse.vue
+++ b/app/src/modules/collections/routes/browse.vue
@@ -44,6 +44,13 @@
 						<v-icon class="toggle" name="bookmark_outline" @click="on" />
 					</template>
 				</bookmark-add>
+
+				<v-icon
+					v-if="bookmark && !bookmarkSaving && bookmarkSaved === false"
+					name="clear"
+					@click="clearLocalSave"
+					class="clear"
+				/>
 			</div>
 		</template>
 
@@ -287,7 +294,8 @@ export default defineComponent({
 			resetPreset,
 			bookmarkSaved,
 			bookmarkIsMine,
-			saving: bookmarkSaving,
+			busy: bookmarkSaving,
+			clearLocalSave,
 		} = usePreset(collection, bookmarkID);
 
 		const {
@@ -359,6 +367,7 @@ export default defineComponent({
 			bookmarkSaved,
 			bookmarkIsMine,
 			bookmarkSaving,
+			clearLocalSave,
 		};
 
 		function useBreadcrumb() {
@@ -587,7 +596,8 @@ export default defineComponent({
 	}
 
 	.add,
-	.save {
+	.save,
+	.clear {
 		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
 
diff --git a/app/src/stores/presets.ts b/app/src/stores/presets.ts
index d00d3e40cc..b8a5b0cce5 100644
--- a/app/src/stores/presets.ts
+++ b/app/src/stores/presets.ts
@@ -168,7 +168,7 @@ export const usePresetsStore = createStore({
 			}
 		},
 
-		async saveLocal(updatedPreset: Preset) {
+		saveLocal(updatedPreset: Preset) {
 			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
 				if (preset.id === updatedPreset.id) {
 					return {
@@ -180,5 +180,18 @@ export const usePresetsStore = createStore({
 				return preset;
 			});
 		},
+
+		async clearLocalSave(preset: Preset) {
+			const response = await api.get(`/presets/${preset.id}`);
+
+			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
+				if (preset.id === response.data.data.id) {
+					console.log('replace');
+					return response.data.data;
+				}
+
+				return preset;
+			});
+		},
 	},
 });

From 9981898acd20d583d94eca1c532a1c46147116d8 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 17:25:05 -0400
Subject: [PATCH 04/19] Show bookmark scope icons

---
 .../collections/components/navigation.vue     | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index ac985e0630..f75048762a 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -22,6 +22,9 @@
 			<v-list-item exact v-for="bookmark in bookmarks" :key="bookmark.id" :to="bookmark.to">
 				<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
 				<v-list-item-content>{{ bookmark.title }}</v-list-item-content>
+				<v-list-item-icon v-if="bookmark.scope !== 'user'" class="bookmark-scope">
+					<v-icon :name="bookmark.scope === 'role' ? 'people' : 'public'" />
+				</v-list-item-icon>
 			</v-list-item>
 		</template>
 
@@ -33,15 +36,14 @@
 				{{ $t('no_collections_copy') }}
 			</template>
 		</div>
-
 	</v-list>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import useNavigation from '../composables/use-navigation';
-import { usePresetsStore } from '@/stores/';
-import { useUserStore } from '@/stores';
+import { usePresetsStore, useUserStore } from '@/stores/';
+import { orderBy } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -57,16 +59,25 @@ export default defineComponent({
 		const isAdmin = computed(() => userStore.state.currentUser?.role.admin === true);
 
 		const bookmarks = computed(() => {
-			return presetsStore.state.collectionPresets
-				.filter((preset) => {
-					return preset.title !== null && preset.collection.startsWith('directus_') === false;
-				})
-				.map((preset) => {
-					return {
-						...preset,
-						to: `/collections/${preset.collection}?bookmark=${preset.id}`,
-					};
-				});
+			return orderBy(
+				presetsStore.state.collectionPresets
+					.filter((preset) => {
+						return preset.title !== null && preset.collection.startsWith('directus_') === false;
+					})
+					.map((preset) => {
+						let scope = 'global';
+						if (!!preset.role) scope = 'role';
+						if (!!preset.user) scope = 'user';
+
+						return {
+							...preset,
+							to: `/collections/${preset.collection}?bookmark=${preset.id}`,
+							scope,
+						};
+					}),
+				['title'],
+				['asc']
+			);
 		});
 
 		return { navItems, bookmarks, customNavItems, isAdmin };
@@ -87,4 +98,8 @@ export default defineComponent({
 		--v-button-background-color-hover: var(--primary);
 	}
 }
+
+.bookmark-scope {
+	--v-icon-color: var(--foreground-subdued);
+}
 </style>

From dbf7b3e28ed25f4617a55883eed46e6fb18f2d58 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 17:27:12 -0400
Subject: [PATCH 05/19] Only show bookmark scope on hover

---
 app/src/modules/collections/components/navigation.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index f75048762a..811f605c44 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -19,7 +19,7 @@
 		<template v-if="bookmarks.length > 0">
 			<v-divider />
 
-			<v-list-item exact v-for="bookmark in bookmarks" :key="bookmark.id" :to="bookmark.to">
+			<v-list-item exact v-for="bookmark in bookmarks" :key="bookmark.id" :to="bookmark.to" class="bookmark">
 				<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
 				<v-list-item-content>{{ bookmark.title }}</v-list-item-content>
 				<v-list-item-icon v-if="bookmark.scope !== 'user'" class="bookmark-scope">
@@ -101,5 +101,12 @@ export default defineComponent({
 
 .bookmark-scope {
 	--v-icon-color: var(--foreground-subdued);
+
+	opacity: 0;
+	transition: opacity var(--fast) var(--transition);
+}
+
+.bookmark:hover .bookmark-scope {
+	opacity: 1;
 }
 </style>

From 14f68ac180ed10ec28257ac0ad22789510d663a5 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 17:49:56 -0400
Subject: [PATCH 06/19] Add rename/delete to bookmarks

---
 app/src/lang/en-US/index.json                 |   7 +-
 .../components/navigation-bookmark.vue        | 165 ++++++++++++++++++
 .../collections/components/navigation.vue     |  21 +--
 .../files/components/navigation-folder.vue    |   2 +-
 4 files changed, 173 insertions(+), 22 deletions(-)
 create mode 100644 app/src/modules/collections/components/navigation-bookmark.vue

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index d8e09681f0..628fb4561a 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -19,6 +19,10 @@
 	"create_user": "Create User",
 
 	"rename_folder": "Rename Folder",
+	"delete_folder": "Delete Folder",
+	"rename_bookmark": "Rename Bookmark",
+	"delete_bookmark": "Delete Bookmark",
+	"delete_bookmark_copy": "Are you sure you want to delete the \"{bookmark}\" bookmark? This action cannot be undone.",
 
 	"public": "Public",
 	"public_description": "Controls what API data is available without authenticating.",
@@ -280,7 +284,6 @@
 	"submit": "Submit",
 
 	"move_to_folder": "Move to Folder",
-	"delete_folder": "Delete Folder",
 	"select_folder": "Select Folder",
 	"move": "Move",
 
@@ -1017,8 +1020,6 @@
   "delete": "Delete",
 
   "delete_are_you_sure": "This action is permanent and can not be undone. Are you sure you would like to proceed?",
-  "delete_bookmark": "Delete Bookmark",
-  "delete_bookmark_body": "Are you sure you want to delete this bookmark? This action cannot be undone.",
   "delete_confirmation": "Delete Confirmation",
   "delete_field_are_you_sure": "Are you sure you want to delete the field \"{field}\"? This action can not be undone.",
   "delete_role_are_you_sure": "Are you sure to delete the role \"{name}\"? This action cannot be undone.",
diff --git a/app/src/modules/collections/components/navigation-bookmark.vue b/app/src/modules/collections/components/navigation-bookmark.vue
new file mode 100644
index 0000000000..ef66424807
--- /dev/null
+++ b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -0,0 +1,165 @@
+<template>
+	<v-list-item exact :to="bookmark.to" class="bookmark" @contextmenu.native.prevent.stop="$refs.contextMenu.activate">
+		<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
+		<v-list-item-content>{{ bookmark.title }}</v-list-item-content>
+		<v-list-item-icon v-if="bookmark.scope !== 'user'" class="bookmark-scope">
+			<v-icon :name="bookmark.scope === 'role' ? 'people' : 'public'" />
+		</v-list-item-icon>
+
+		<v-menu ref="contextMenu" show-arrow placement="bottom-start">
+			<v-list dense>
+				<v-list-item @click="renameActive = true" :disabled="isMine === false">
+					<v-list-item-icon>
+						<v-icon name="edit" outline />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('rename_bookmark') }}
+					</v-list-item-content>
+				</v-list-item>
+				<v-list-item @click="deleteActive = true" class="danger" :disabled="isMine === false">
+					<v-list-item-icon>
+						<v-icon name="delete" outline />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('delete_bookmark') }}
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</v-menu>
+
+		<v-dialog v-model="renameActive" persistent>
+			<v-card>
+				<v-card-title>{{ $t('rename_bookmark') }}</v-card-title>
+				<v-card-text>
+					<v-input v-model="renameValue" autofocus @keyup.enter="renameSave" />
+				</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="renameActive = false">{{ $t('cancel') }}</v-button>
+					<v-button @click="renameSave" :loading="renameSaving">{{ $t('save') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
+		<v-dialog v-model="deleteActive" persistent>
+			<v-card>
+				<v-card-title>{{ $t('delete_bookmark_copy', { bookmark: bookmark.title }) }}</v-card-title>
+				<v-card-actions>
+					<v-button secondary @click="deleteActive = false">{{ $t('cancel') }}</v-button>
+					<v-button @click="deleteSave" :loading="deleteSaving" class="action-delete">
+						{{ $t('delete') }}
+					</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</v-list-item>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, computed } from '@vue/composition-api';
+import { Preset } from '@/types';
+import { useUserStore, usePresetsStore } from '@/stores';
+
+export default defineComponent({
+	props: {
+		bookmark: {
+			type: Object as PropType<Preset>,
+			required: true,
+		},
+	},
+	setup(props) {
+		const contextMenu = ref();
+		const userStore = useUserStore();
+		const presetsStore = usePresetsStore();
+
+		const isMine = computed(() => props.bookmark.user === userStore.state.currentUser!.id);
+
+		const { renameActive, renameValue, renameSave, renameSaving } = useRenameBookmark();
+		const { deleteActive, deleteValue, deleteSave, deleteSaving } = useDeleteBookmark();
+
+		return {
+			contextMenu,
+			isMine,
+			renameActive,
+			renameValue,
+			renameSave,
+			renameSaving,
+			deleteActive,
+			deleteValue,
+			deleteSave,
+			deleteSaving,
+		};
+
+		function useRenameBookmark() {
+			const renameActive = ref(false);
+			const renameValue = ref(props.bookmark.title);
+			const renameSaving = ref(false);
+
+			return { renameActive, renameValue, renameSave, renameSaving };
+
+			async function renameSave() {
+				renameSaving.value = true;
+
+				try {
+					await presetsStore.savePreset({
+						...props.bookmark,
+						title: renameValue.value,
+					});
+
+					renameActive.value = false;
+				} catch (error) {
+					console.error(error);
+				} finally {
+					renameSaving.value = false;
+				}
+			}
+		}
+
+		function useDeleteBookmark() {
+			const deleteActive = ref(false);
+			const deleteValue = ref(props.bookmark.title);
+			const deleteSaving = ref(false);
+
+			return { deleteActive, deleteValue, deleteSave, deleteSaving };
+
+			async function deleteSave() {
+				deleteSaving.value = true;
+
+				try {
+					await presetsStore.savePreset(props.bookmark.id);
+
+					deleteActive.value = false;
+				} catch (error) {
+					console.error(error);
+				} finally {
+					deleteSaving.value = false;
+				}
+			}
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.bookmark-scope {
+	--v-icon-color: var(--foreground-subdued);
+
+	opacity: 0;
+	transition: opacity var(--fast) var(--transition);
+}
+
+.bookmark:hover .bookmark-scope {
+	opacity: 1;
+}
+
+.danger {
+	--v-list-item-color: var(--danger);
+	--v-list-item-icon-color: var(--danger);
+}
+
+.action-delete {
+	--v-button-background-color: var(--danger-25);
+	--v-button-color: var(--danger);
+	--v-button-background-color-hover: var(--danger-50);
+	--v-button-color-hover: var(--danger);
+}
+</style>
diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index 811f605c44..2043644485 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -19,13 +19,7 @@
 		<template v-if="bookmarks.length > 0">
 			<v-divider />
 
-			<v-list-item exact v-for="bookmark in bookmarks" :key="bookmark.id" :to="bookmark.to" class="bookmark">
-				<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
-				<v-list-item-content>{{ bookmark.title }}</v-list-item-content>
-				<v-list-item-icon v-if="bookmark.scope !== 'user'" class="bookmark-scope">
-					<v-icon :name="bookmark.scope === 'role' ? 'people' : 'public'" />
-				</v-list-item-icon>
-			</v-list-item>
+			<navigation-bookmark v-for="bookmark of bookmarks" :key="bookmark.id" :bookmark="bookmark" />
 		</template>
 
 		<div v-if="!customNavItems && !navItems.length && !bookmarks.length" class="empty">
@@ -44,8 +38,10 @@ import { defineComponent, computed } from '@vue/composition-api';
 import useNavigation from '../composables/use-navigation';
 import { usePresetsStore, useUserStore } from '@/stores/';
 import { orderBy } from 'lodash';
+import NavigationBookmark from './navigation-bookmark.vue';
 
 export default defineComponent({
+	components: { NavigationBookmark },
 	props: {
 		exact: {
 			type: Boolean,
@@ -98,15 +94,4 @@ export default defineComponent({
 		--v-button-background-color-hover: var(--primary);
 	}
 }
-
-.bookmark-scope {
-	--v-icon-color: var(--foreground-subdued);
-
-	opacity: 0;
-	transition: opacity var(--fast) var(--transition);
-}
-
-.bookmark:hover .bookmark-scope {
-	opacity: 1;
-}
 </style>
diff --git a/app/src/modules/files/components/navigation-folder.vue b/app/src/modules/files/components/navigation-folder.vue
index fd70c2ccaa..f78ba453c4 100644
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation-folder.vue
@@ -70,7 +70,7 @@
 			<v-card>
 				<v-card-title>{{ $t('rename_folder') }}</v-card-title>
 				<v-card-text>
-					<v-input v-model="renameValue" />
+					<v-input v-model="renameValue" autofocus @keyup.enter="renameSave" />
 				</v-card-text>
 				<v-card-actions>
 					<v-button secondary @click="renameActive = false">{{ $t('cancel') }}</v-button>

From 40ae4ffbe50b3a6ebb800ebbf5fd1f83cd8f0bc1 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 17:53:51 -0400
Subject: [PATCH 07/19] Refresh current user store on user save

---
 app/src/modules/users/routes/detail.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/src/modules/users/routes/detail.vue b/app/src/modules/users/routes/detail.vue
index 19dd8d62c6..043fc60e28 100644
--- a/app/src/modules/users/routes/detail.vue
+++ b/app/src/modules/users/routes/detail.vue
@@ -169,7 +169,7 @@ import CommentsDrawerDetail from '@/views/private/components/comments-drawer-det
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import api from '@/api';
-import { useFieldsStore } from '@/stores/';
+import { useFieldsStore, useUserStore } from '@/stores/';
 import useFormFields from '@/composables/use-form-fields';
 import { Field } from '@/types';
 import UserInfoDrawerDetail from '../components/user-info-drawer-detail.vue';
@@ -209,6 +209,7 @@ export default defineComponent({
 	},
 	setup(props) {
 		const fieldsStore = useFieldsStore();
+		const userStore = useUserStore();
 
 		const { primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
@@ -344,6 +345,7 @@ export default defineComponent({
 
 		async function saveAndQuit() {
 			await save();
+			await refreshCurrentUser();
 			router.push(`/users`);
 		}
 
@@ -361,6 +363,7 @@ export default defineComponent({
 
 		async function saveAndAddNew() {
 			await save();
+			await refreshCurrentUser();
 			router.push(`/users/+`);
 		}
 
@@ -374,6 +377,12 @@ export default defineComponent({
 			router.push(`/users`);
 		}
 
+		async function refreshCurrentUser() {
+			if (userStore.state.currentUser!.id === item.value.id) {
+				await userStore.hydrate();
+			}
+		}
+
 		function useUserPreview() {
 			const loading = ref(false);
 			const error = ref(null);

From 1a4339335e5721c02d202bd33b7595c57c4d0f1d Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 17:58:08 -0400
Subject: [PATCH 08/19] Show logout reason on login

---
 app/src/api.ts                 |  2 +-
 app/src/auth.ts                |  4 ++--
 app/src/lang/en-US/index.json  |  5 +++++
 app/src/router.ts              |  1 +
 app/src/routes/login/login.vue | 14 ++++++++++++--
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/src/api.ts b/app/src/api.ts
index 6a814f85ff..45bf3402e3 100644
--- a/app/src/api.ts
+++ b/app/src/api.ts
@@ -64,7 +64,7 @@ export const onError = async (error: RequestError) => {
 		try {
 			newToken = await refresh();
 		} catch {
-			logout({ reason: LogoutReason.ERROR_SESSION_EXPIRED });
+			logout({ reason: LogoutReason.SESSION_EXPIRED });
 			return Promise.reject();
 		}
 
diff --git a/app/src/auth.ts b/app/src/auth.ts
index 8bef238765..34c55f3654 100644
--- a/app/src/auth.ts
+++ b/app/src/auth.ts
@@ -49,13 +49,13 @@ export async function refresh({ navigate }: LogoutOptions = { navigate: true })
 
 		return accessToken;
 	} catch (error) {
-		await logout({ navigate, reason: LogoutReason.ERROR_SESSION_EXPIRED });
+		await logout({ navigate, reason: LogoutReason.SESSION_EXPIRED });
 	}
 }
 
 export enum LogoutReason {
 	SIGN_OUT = 'SIGN_OUT',
-	ERROR_SESSION_EXPIRED = 'ERROR_SESSION_EXPIRED',
+	SESSION_EXPIRED = 'SESSION_EXPIRED',
 }
 
 export type LogoutOptions = {
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 628fb4561a..6cb5cf17c7 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -24,6 +24,11 @@
 	"delete_bookmark": "Delete Bookmark",
 	"delete_bookmark_copy": "Are you sure you want to delete the \"{bookmark}\" bookmark? This action cannot be undone.",
 
+	"logoutReason": {
+		"SIGN_OUT": "Signed out",
+		"SESSION_EXPIRED": "Session expired"
+	},
+
 	"public": "Public",
 	"public_description": "Controls what API data is available without authenticating.",
 
diff --git a/app/src/router.ts b/app/src/router.ts
index 2bd461bfb8..0e7c23b424 100644
--- a/app/src/router.ts
+++ b/app/src/router.ts
@@ -20,6 +20,7 @@ export const defaultRoutes: RouteConfig[] = [
 		component: LoginRoute,
 		props: (route) => ({
 			ssoErrorCode: route.query.error ? route.query.code : null,
+			logoutReason: route.query.reason,
 		}),
 		meta: {
 			public: true,
diff --git a/app/src/routes/login/login.vue b/app/src/routes/login/login.vue
index ffa8c3f7cf..d96a928ba0 100644
--- a/app/src/routes/login/login.vue
+++ b/app/src/routes/login/login.vue
@@ -12,23 +12,33 @@
 		</template>
 		<template v-else #notice>
 			<v-icon name="lock_outlined" left />
-			{{ $t('not_authenticated') }}
+			{{
+				logoutReason && $te(`logoutReason.${logoutReason}`)
+					? $t(`logoutReason.${logoutReason}`)
+					: $t('not_authenticated')
+			}}
 		</template>
 	</public-view>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, PropType } from '@vue/composition-api';
 import LoginForm from './components/login-form/';
 import ContinueAs from './components/continue-as/';
 import { useAppStore, useSettingsStore } from '@/stores';
 
+import { LogoutReason } from '@/auth';
+
 export default defineComponent({
 	props: {
 		ssoErrorCode: {
 			type: String,
 			default: null,
 		},
+		logoutReason: {
+			type: String as PropType<LogoutReason>,
+			default: null,
+		},
 	},
 	components: { LoginForm, ContinueAs },
 	setup() {

From 70ae6d63cf345565b8de244bb59d6175465fe1b9 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Sep 2020 18:03:46 -0400
Subject: [PATCH 09/19] v9.0.0-alpha.33

---
 api/package-lock.json                              | 2 +-
 api/package.json                                   | 4 ++--
 app/package.json                                   | 2 +-
 lerna.json                                         | 2 +-
 packages/create-directus-project/package-lock.json | 2 +-
 packages/create-directus-project/package.json      | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/api/package-lock.json b/api/package-lock.json
index 0211af9546..4e6e96957e 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "directus",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.33",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/api/package.json b/api/package.json
index f8f33d7efc..39126785da 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "directus",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.33",
   "license": "GPL-3.0-only",
   "homepage": "https://github.com/directus/next#readme",
   "description": "Directus is a real-time API and App dashboard for managing SQL database content.",
@@ -64,7 +64,7 @@
     "example.env"
   ],
   "dependencies": {
-    "@directus/app": "^9.0.0-alpha.32",
+    "@directus/app": "^9.0.0-alpha.33",
     "@directus/format-title": "^3.2.0",
     "@slynova/flydrive": "^1.0.2",
     "@slynova/flydrive-gcs": "^1.0.2",
diff --git a/app/package.json b/app/package.json
index eae45ec1ad..937771776f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@directus/app",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.33",
   "private": false,
   "description": "Directus is an Open-Source Headless CMS & API for Managing Custom Databases",
   "author": "Rijk van Zanten <rijk@rngr.org>",
diff --git a/lerna.json b/lerna.json
index 814c5a0ee1..80746828cb 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,7 +4,7 @@
     "app",
     "packages/*"
   ],
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.33",
   "command": {
     "bootstrap": {
       "npmClientArgs": [
diff --git a/packages/create-directus-project/package-lock.json b/packages/create-directus-project/package-lock.json
index 80f5ff995f..e36afa079d 100644
--- a/packages/create-directus-project/package-lock.json
+++ b/packages/create-directus-project/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "create-directus-project",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.33",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/create-directus-project/package.json b/packages/create-directus-project/package.json
index 3d150209bb..76164f2a16 100644
--- a/packages/create-directus-project/package.json
+++ b/packages/create-directus-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-directus-project",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.33",
   "description": "A small installer util that will create a directory, add boilerplate folders, and install Directus through npm.",
   "main": "lib/index.js",
   "bin": "./lib/index.js",

From c67d0b5c4685004eb81f79ac94c64a9858f97556 Mon Sep 17 00:00:00 2001
From: Tommaso Bartolucci <tommasobartolucci11@gmail.com>
Date: Mon, 7 Sep 2020 13:58:20 +0200
Subject: [PATCH 10/19] add v-model to tab-items

I need to add the v-model to v-tabs-items as well, is this correct?
---
 app/src/components/v-tabs/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/v-tabs/readme.md b/app/src/components/v-tabs/readme.md
index a3505cac55..716c35b13e 100644
--- a/app/src/components/v-tabs/readme.md
+++ b/app/src/components/v-tabs/readme.md
@@ -13,7 +13,7 @@ device.
 		<v-tab><v-icon name="help" left /> Help</v-tab>
 	</v-tabs>
 
-	<v-tabs-items>
+	<v-tabs-items v-model="selection">
 		<v-tab-item>I'm the content for Home!</v-tab-item>
 		<v-tab-item>I'm the content for News!</v-tab-item>
 		<v-tab-item>I'm the content for Help!</v-tab-item>

From c7dcd11d27d81a19a90689397a20ec308685433f Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Mon, 7 Sep 2020 11:19:01 -0400
Subject: [PATCH 11/19] new preset icons and tooltips

---
 .../v-icon/custom-icons/bookmark_save.vue     | 21 +++++++++++++++
 app/src/components/v-icon/v-icon.vue          |  3 +++
 app/src/lang/en-US/index.json                 |  2 ++
 app/src/modules/collections/routes/browse.vue | 26 ++++++++++++++++---
 4 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 app/src/components/v-icon/custom-icons/bookmark_save.vue

diff --git a/app/src/components/v-icon/custom-icons/bookmark_save.vue b/app/src/components/v-icon/custom-icons/bookmark_save.vue
new file mode 100644
index 0000000000..21795b8a63
--- /dev/null
+++ b/app/src/components/v-icon/custom-icons/bookmark_save.vue
@@ -0,0 +1,21 @@
+<template functional>
+	<svg
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		fill="none"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		stroke-linejoin="round"
+		stroke-miterlimit="2"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M18.38 3.6c-.38-.4-.83-.6-1.36-.6H6.98c-.53 0-1 .2-1.4.6-.38.42-.56.88-.56 1.42V21L12 18l6.98 3V5.02c0-.54-.2-1-.6-1.41zm-8.05 11.5l6.7-6.7-1.4-1.4-5.3 5.3-1.92-1.93L7 11.79l3.33 3.33z"
+		/>
+	</svg>
+</template>
+
+<script lang="ts">
+export default {};
+</script>
diff --git a/app/src/components/v-icon/v-icon.vue b/app/src/components/v-icon/v-icon.vue
index a2ec106598..5205c5114c 100644
--- a/app/src/components/v-icon/v-icon.vue
+++ b/app/src/components/v-icon/v-icon.vue
@@ -16,6 +16,7 @@ import { defineComponent, computed } from '@vue/composition-api';
 import useSizeClass, { sizeProps } from '@/composables/size-class';
 
 import CustomIconDirectus from './custom-icons/directus.vue';
+import CustomIconBookmarkSave from './custom-icons/bookmark_save.vue';
 import CustomIconBox from './custom-icons/box.vue';
 import CustomIconCommitNode from './custom-icons/commit_node.vue';
 import CustomIconGrid1 from './custom-icons/grid_1.vue';
@@ -34,6 +35,7 @@ import CustomIconLogout from './custom-icons/logout.vue';
 
 const customIcons: string[] = [
 	'directus',
+	'bookmark_save',
 	'box',
 	'commit_node',
 	'grid_1',
@@ -54,6 +56,7 @@ const customIcons: string[] = [
 export default defineComponent({
 	components: {
 		CustomIconDirectus,
+		CustomIconBookmarkSave,
 		CustomIconBox,
 		CustomIconCommitNode,
 		CustomIconGrid1,
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 6cb5cf17c7..d375dbd0b6 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -20,7 +20,9 @@
 
 	"rename_folder": "Rename Folder",
 	"delete_folder": "Delete Folder",
+	"reset_bookmark": "Reset Bookmark",
 	"rename_bookmark": "Rename Bookmark",
+	"update_bookmark": "Update Bookmark",
 	"delete_bookmark": "Delete Bookmark",
 	"delete_bookmark_copy": "Are you sure you want to delete the \"{bookmark}\" bookmark? This action cannot be undone.",
 
diff --git a/app/src/modules/collections/routes/browse.vue b/app/src/modules/collections/routes/browse.vue
index a108283db1..16be7d057d 100644
--- a/app/src/modules/collections/routes/browse.vue
+++ b/app/src/modules/collections/routes/browse.vue
@@ -29,8 +29,7 @@
 				<v-icon class="saved" name="bookmark" v-else-if="bookmarkSaved" />
 
 				<template v-else-if="bookmarkIsMine">
-					<v-progress-circular indeterminate small v-if="bookmarkSaving" />
-					<v-icon class="save" v-else @click="savePreset()" name="save" />
+					<v-icon class="save" @click="savePreset()" name="bookmark_save" v-tooltip.bottom="$t('update_bookmark')" />
 				</template>
 
 				<bookmark-add
@@ -47,9 +46,10 @@
 
 				<v-icon
 					v-if="bookmark && !bookmarkSaving && bookmarkSaved === false"
-					name="clear"
+					name="settings_backup_restore"
 					@click="clearLocalSave"
 					class="clear"
+					v-tooltip.bottom="$t('reset_bookmark')"
 				/>
 			</div>
 		</template>
@@ -590,7 +590,7 @@ export default defineComponent({
 	.add,
 	.save,
 	.saved,
-	.v-progress-circular {
+	.clear {
 		display: inline-block;
 		margin-left: 8px;
 	}
@@ -598,6 +598,7 @@ export default defineComponent({
 	.add,
 	.save,
 	.clear {
+		cursor: pointer;
 		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
 
@@ -606,8 +607,25 @@ export default defineComponent({
 		}
 	}
 
+	.save {
+		color: var(--warning);
+
+		&:hover {
+			color: var(--warning-125);
+		}
+	}
+
 	.saved {
 		color: var(--primary);
 	}
+
+	.clear {
+		color: var(--foreground-subdued);
+		margin-left: 4px;
+
+		&:hover {
+			color: var(--warning);
+		}
+	}
 }
 </style>

From cd058564d27391d20313b240c21b6a1860bc7a38 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Mon, 7 Sep 2020 11:24:16 -0400
Subject: [PATCH 12/19] reorder new collection system fields

---
 .../routes/data-model/new-collection.vue      | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 4d01df592a..27c5f968ad 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -143,30 +143,30 @@ export default defineComponent({
 				label: 'sort',
 				icon: 'low_priority',
 			},
-			userCreated: {
-				enabled: false,
-				name: 'user_created',
-				label: 'created_by',
-				icon: 'account_circle',
-			},
-			userUpdated: {
-				enabled: false,
-				name: 'user_updated',
-				label: 'updated_by',
-				icon: 'account_circle',
-			},
 			dateCreated: {
 				enabled: false,
 				name: 'date_created',
 				label: 'created_on',
 				icon: 'access_time',
 			},
+			userCreated: {
+				enabled: false,
+				name: 'user_created',
+				label: 'created_by',
+				icon: 'account_circle',
+			},
 			dateUpdated: {
 				enabled: false,
 				name: 'date_updated',
 				label: 'updated_on',
 				icon: 'access_time',
 			},
+			userUpdated: {
+				enabled: false,
+				name: 'user_updated',
+				label: 'updated_by',
+				icon: 'account_circle',
+			},
 		});
 
 		const saving = ref(false);

From 972d2886a9752221b57baac5c31561aafe40acaa Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Mon, 7 Sep 2020 11:47:42 -0400
Subject: [PATCH 13/19] clean up collection translations

---
 api/src/database/seeds/system.yaml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index 8b5802dad2..61877a1f89 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -634,11 +634,13 @@ rows:
         special: json
         interface: repeater
         options:
-          template: '{{ locale }}'
+          template: '{{ translation }} ({{ locale }})'
           fields:
           - field: locale
             name: Language
             type: string
+            schema:
+              default_value: en-US
             meta:
               interface: system-language
               width: half
@@ -648,6 +650,8 @@ rows:
             meta:
               interface: text-input
               width: half
+              options:
+                placeholder: Enter a translation...
         locked: true
         sort: 8
         width: full

From d36a3fb81598068b7e1fb3b99cb9fc4f7d54d374 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Mon, 7 Sep 2020 11:58:29 -0400
Subject: [PATCH 14/19] system field widths

---
 .../modules/settings/routes/data-model/new-collection.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 27c5f968ad..06f4363cf3 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -332,7 +332,7 @@ export default defineComponent({
 						},
 						readonly: true,
 						hidden: true,
-						width: 'full',
+						width: 'half',
 					},
 					schema: {},
 				});
@@ -347,7 +347,7 @@ export default defineComponent({
 						interface: 'datetime',
 						readonly: true,
 						hidden: true,
-						width: 'full',
+						width: 'half',
 					},
 					schema: {},
 				});
@@ -366,7 +366,7 @@ export default defineComponent({
 						},
 						readonly: true,
 						hidden: true,
-						width: 'full',
+						width: 'half',
 					},
 					schema: {},
 				});
@@ -381,7 +381,7 @@ export default defineComponent({
 						interface: 'datetime',
 						readonly: true,
 						hidden: true,
-						width: 'full',
+						width: 'half',
 					},
 					schema: {},
 				});

From a41d7118843fe0404ce1831c7bd4c559534fa2eb Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Mon, 7 Sep 2020 11:58:38 -0400
Subject: [PATCH 15/19] field translations

---
 .../routes/data-model/field-detail/components/schema.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
index b305d4f771..66268f793b 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -68,7 +68,7 @@
 				<div class="label type-label">{{ $t('translation') }}</div>
 				<interface-repeater
 					v-model="fieldData.meta.translation"
-					:template="'{{ locale }}'"
+					:template="'{{ translation }} ({{ locale }})'"
 					:fields="[
 						{
 							field: 'locale',
@@ -78,6 +78,9 @@
 								interface: 'system-language',
 								width: 'half',
 							},
+							schema: {
+								default_value: 'en-US'
+							},
 						},
 						{
 							field: 'translation',
@@ -86,6 +89,9 @@
 							meta: {
 								interface: 'text-input',
 								width: 'half',
+								options: {
+									placeholder: 'Enter a translation...'
+								},
 							},
 						},
 					]"

From 048c1c57bf837c8cca762f2db4f258d7a4333207 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 7 Sep 2020 19:58:19 +0200
Subject: [PATCH 16/19] merge badge and tags display

---
 app/src/displays/badge/badge.vue              | 77 ++++++++++++-------
 app/src/displays/badge/index.ts               | 14 +++-
 app/src/displays/{tags => badge}/readme.md    |  0
 .../displays/{tags => badge}/tags.story.ts    |  0
 app/src/displays/{tags => badge}/tags.test.ts |  0
 app/src/displays/tags/index.ts                | 24 ------
 app/src/displays/tags/tags.vue                | 38 ---------
 7 files changed, 63 insertions(+), 90 deletions(-)
 rename app/src/displays/{tags => badge}/readme.md (100%)
 rename app/src/displays/{tags => badge}/tags.story.ts (100%)
 rename app/src/displays/{tags => badge}/tags.test.ts (100%)
 delete mode 100644 app/src/displays/tags/index.ts
 delete mode 100644 app/src/displays/tags/tags.vue

diff --git a/app/src/displays/badge/badge.vue b/app/src/displays/badge/badge.vue
index d358c5a6ae..897d6b59af 100644
--- a/app/src/displays/badge/badge.vue
+++ b/app/src/displays/badge/badge.vue
@@ -1,26 +1,31 @@
 <template>
-	<div>
-		<value-null v-if="value === null" />
-		<div class="badge" :style="styles">{{ displayValue }}</div>
+	<div class="display-tags">
+		<v-chip v-for="item in items" :key="item.value" :style="getStyles(item)" small disabled label>
+			{{ getText(item) }}
+		</v-chip>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { defineComponent, computed, PropType } from '@vue/composition-api';
 import formatTitle from '@directus/format-title';
 
 type Choice = {
 	value: string;
-	text: string;
-	foreground: string | null;
-	background: string | null;
+	text?: string;
+	foreground?: string | null;
+	background?: string | null;
 };
 
 export default defineComponent({
 	props: {
 		value: {
-			type: String,
-			default: null,
+			type: String || (Array as PropType<string[]>),
+			required: true,
+		},
+		format: {
+			type: Boolean,
+			default: true,
 		},
 		choices: {
 			type: Array as PropType<Choice[]>,
@@ -36,35 +41,53 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const currentChoice = computed(() => {
-			return props.choices.find((choice) => {
-				return choice.value === props.value;
+		const items = computed(() => {
+			let items: string[];
+			if (typeof props.value === 'string') {
+				if (props.value === null) return [];
+				items = [props.value];
+			} else {
+				items = props.value;
+			}
+
+			return items.map((item) => {
+				const choise = props.choices.find((choise) => choise.value === item);
+				if (choise === undefined) {
+					return {
+						value: item,
+					};
+				} else {
+					return choise;
+				}
 			});
 		});
 
-		const displayValue = computed(() => {
-			if (!currentChoice.value) return formatTitle(props.value);
-			return currentChoice.value.text;
-		});
-
-		const styles = computed(() => {
+		function getStyles(item: Choice) {
 			return {
-				color: currentChoice.value?.foreground || props.defaultForeground,
-				backgroundColor: currentChoice.value?.background || props.defaultBackground,
+				'--v-chip-color': item?.foreground || props.defaultForeground,
+				'--v-chip-background-color': item?.background || props.defaultBackground,
 			};
-		});
+		}
 
-		return { displayValue, styles };
+		function getText(item: Choice) {
+			if (item.text === undefined) {
+				return props.format ? formatTitle(item.value) : item.value;
+			} else {
+				return props.format ? formatTitle(item.text) : item.text;
+			}
+		}
+
+		return { getStyles, items, getText };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.badge {
+.display-tags {
 	display: inline-block;
-	padding: 8px;
-	line-height: 1;
-	vertical-align: middle;
-	border-radius: var(--border-radius);
+}
+
+.v-chip + .v-chip {
+	margin-left: 4px;
 }
 </style>
diff --git a/app/src/displays/badge/index.ts b/app/src/displays/badge/index.ts
index 36f3804678..a7aa601232 100644
--- a/app/src/displays/badge/index.ts
+++ b/app/src/displays/badge/index.ts
@@ -4,10 +4,22 @@ import DisplayBadge from './badge.vue';
 export default defineDisplay(({ i18n }) => ({
 	id: 'badge',
 	name: i18n.t('badge'),
-	types: ['string'],
+	types: ['string', 'json'],
 	icon: 'flag',
 	handler: DisplayBadge,
 	options: [
+		{
+			field: 'format',
+			name: i18n.t('format_text'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			schema: {
+				default_value: true,
+			},
+		},
 		{
 			field: 'defaultForeground',
 			name: i18n.t('default_foreground'),
diff --git a/app/src/displays/tags/readme.md b/app/src/displays/badge/readme.md
similarity index 100%
rename from app/src/displays/tags/readme.md
rename to app/src/displays/badge/readme.md
diff --git a/app/src/displays/tags/tags.story.ts b/app/src/displays/badge/tags.story.ts
similarity index 100%
rename from app/src/displays/tags/tags.story.ts
rename to app/src/displays/badge/tags.story.ts
diff --git a/app/src/displays/tags/tags.test.ts b/app/src/displays/badge/tags.test.ts
similarity index 100%
rename from app/src/displays/tags/tags.test.ts
rename to app/src/displays/badge/tags.test.ts
diff --git a/app/src/displays/tags/index.ts b/app/src/displays/tags/index.ts
deleted file mode 100644
index 1f3b6ffd03..0000000000
--- a/app/src/displays/tags/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { defineDisplay } from '@/displays/define';
-import DisplayTags from './tags.vue';
-
-export default defineDisplay(({ i18n }) => ({
-	id: 'tags',
-	name: i18n.t('tags'),
-	types: ['json'],
-	icon: 'label',
-	handler: DisplayTags,
-	options: [
-		{
-			field: 'format',
-			name: i18n.t('format_text'),
-			type: 'boolean',
-			meta: {
-				width: 'half',
-				interface: 'toggle',
-			},
-			schema: {
-				default_value: true,
-			},
-		},
-	],
-}));
diff --git a/app/src/displays/tags/tags.vue b/app/src/displays/tags/tags.vue
deleted file mode 100644
index 65f1f1af5e..0000000000
--- a/app/src/displays/tags/tags.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-	<div class="display-tags">
-		<v-chip v-for="val in value" :key="val" small disabled label>
-			{{ format ? formatTitle(val) : val }}
-		</v-chip>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
-import formatTitle from '@directus/format-title';
-
-export default defineComponent({
-	props: {
-		value: {
-			type: Array as PropType<string[]>,
-			required: true,
-		},
-		format: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	setup() {
-		return { formatTitle };
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.display-tags {
-	display: inline-block;
-}
-
-.v-chip + .v-chip {
-	margin-left: 4px;
-}
-</style>

From eeccd7891d2f8f130e139be258323630606df129 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 8 Sep 2020 09:47:19 -0400
Subject: [PATCH 17/19] Rename badge->labels, final tweaks to codestyle

---
 app/src/displays/badge/badge.vue            | 93 -------------------
 app/src/displays/badge/readme.md            |  3 -
 app/src/displays/badge/tags.story.ts        | 24 -----
 app/src/displays/badge/tags.test.ts         | 21 -----
 app/src/displays/{badge => labels}/index.ts | 32 +++----
 app/src/displays/labels/labels.vue          | 99 +++++++++++++++++++++
 app/src/lang/en-US/index.json               |  2 +
 7 files changed, 117 insertions(+), 157 deletions(-)
 delete mode 100644 app/src/displays/badge/badge.vue
 delete mode 100644 app/src/displays/badge/readme.md
 delete mode 100644 app/src/displays/badge/tags.story.ts
 delete mode 100644 app/src/displays/badge/tags.test.ts
 rename app/src/displays/{badge => labels}/index.ts (92%)
 create mode 100644 app/src/displays/labels/labels.vue

diff --git a/app/src/displays/badge/badge.vue b/app/src/displays/badge/badge.vue
deleted file mode 100644
index 897d6b59af..0000000000
--- a/app/src/displays/badge/badge.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-	<div class="display-tags">
-		<v-chip v-for="item in items" :key="item.value" :style="getStyles(item)" small disabled label>
-			{{ getText(item) }}
-		</v-chip>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, PropType } from '@vue/composition-api';
-import formatTitle from '@directus/format-title';
-
-type Choice = {
-	value: string;
-	text?: string;
-	foreground?: string | null;
-	background?: string | null;
-};
-
-export default defineComponent({
-	props: {
-		value: {
-			type: String || (Array as PropType<string[]>),
-			required: true,
-		},
-		format: {
-			type: Boolean,
-			default: true,
-		},
-		choices: {
-			type: Array as PropType<Choice[]>,
-			default: () => [],
-		},
-		defaultBackground: {
-			type: String,
-			default: '#eceff1',
-		},
-		defaultForeground: {
-			type: String,
-			default: '#263238',
-		},
-	},
-	setup(props) {
-		const items = computed(() => {
-			let items: string[];
-			if (typeof props.value === 'string') {
-				if (props.value === null) return [];
-				items = [props.value];
-			} else {
-				items = props.value;
-			}
-
-			return items.map((item) => {
-				const choise = props.choices.find((choise) => choise.value === item);
-				if (choise === undefined) {
-					return {
-						value: item,
-					};
-				} else {
-					return choise;
-				}
-			});
-		});
-
-		function getStyles(item: Choice) {
-			return {
-				'--v-chip-color': item?.foreground || props.defaultForeground,
-				'--v-chip-background-color': item?.background || props.defaultBackground,
-			};
-		}
-
-		function getText(item: Choice) {
-			if (item.text === undefined) {
-				return props.format ? formatTitle(item.value) : item.value;
-			} else {
-				return props.format ? formatTitle(item.text) : item.text;
-			}
-		}
-
-		return { getStyles, items, getText };
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.display-tags {
-	display: inline-block;
-}
-
-.v-chip + .v-chip {
-	margin-left: 4px;
-}
-</style>
diff --git a/app/src/displays/badge/readme.md b/app/src/displays/badge/readme.md
deleted file mode 100644
index 8d959d6588..0000000000
--- a/app/src/displays/badge/readme.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tags
-
-Renders a CSV of strings as individual chips.
diff --git a/app/src/displays/badge/tags.story.ts b/app/src/displays/badge/tags.story.ts
deleted file mode 100644
index 4a8d02be65..0000000000
--- a/app/src/displays/badge/tags.story.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { withKnobs, array } from '@storybook/addon-knobs';
-import readme from './readme.md';
-import { defineComponent } from '@vue/composition-api';
-
-export default {
-	title: 'Displays / Tags',
-	decorators: [withPadding, withKnobs],
-	parameters: {
-		notes: readme,
-	},
-};
-
-export const basic = () =>
-	defineComponent({
-		props: {
-			value: {
-				default: array('Value', ['vip', 'executive']),
-			},
-		},
-		template: `
-			<display-tags :value="value" />
-		`,
-	});
diff --git a/app/src/displays/badge/tags.test.ts b/app/src/displays/badge/tags.test.ts
deleted file mode 100644
index 818533745c..0000000000
--- a/app/src/displays/badge/tags.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import DisplayTags from './tags.vue';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-import VChip from '@/components/v-chip';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.component('v-chip', VChip);
-
-describe('Displays / Tags', () => {
-	it('Renders a chip for every value', () => {
-		const component = shallowMount(DisplayTags, {
-			localVue,
-			propsData: {
-				value: ['tag 1', 'tag 2', 'tag 3'],
-			},
-		});
-
-		expect(component.findAll(VChip).length).toBe(3);
-	});
-});
diff --git a/app/src/displays/badge/index.ts b/app/src/displays/labels/index.ts
similarity index 92%
rename from app/src/displays/badge/index.ts
rename to app/src/displays/labels/index.ts
index a7aa601232..856885f833 100644
--- a/app/src/displays/badge/index.ts
+++ b/app/src/displays/labels/index.ts
@@ -1,25 +1,13 @@
 import { defineDisplay } from '@/displays/define';
-import DisplayBadge from './badge.vue';
+import DisplayLabels from './labels.vue';
 
 export default defineDisplay(({ i18n }) => ({
-	id: 'badge',
-	name: i18n.t('badge'),
+	id: 'labels',
+	name: i18n.t('labels'),
 	types: ['string', 'json'],
 	icon: 'flag',
-	handler: DisplayBadge,
+	handler: DisplayLabels,
 	options: [
-		{
-			field: 'format',
-			name: i18n.t('format_text'),
-			type: 'boolean',
-			meta: {
-				width: 'half',
-				interface: 'toggle',
-			},
-			schema: {
-				default_value: true,
-			},
-		},
 		{
 			field: 'defaultForeground',
 			name: i18n.t('default_foreground'),
@@ -44,6 +32,18 @@ export default defineDisplay(({ i18n }) => ({
 				default_value: '#eceff1',
 			},
 		},
+		{
+			field: 'format',
+			name: i18n.t('format_text'),
+			type: 'boolean',
+			meta: {
+				width: 'half-left',
+				interface: 'toggle',
+			},
+			schema: {
+				default_value: true,
+			},
+		},
 		{
 			field: 'choices',
 			name: i18n.t('choices'),
diff --git a/app/src/displays/labels/labels.vue b/app/src/displays/labels/labels.vue
new file mode 100644
index 0000000000..fb73b79b1e
--- /dev/null
+++ b/app/src/displays/labels/labels.vue
@@ -0,0 +1,99 @@
+<template>
+	<div class="display-tags">
+		<v-chip
+			v-for="item in items"
+			:key="item.value"
+			:style="{
+				'--v-chip-color': item.foreground,
+				'--v-chip-background-color': item.background,
+			}"
+			small
+			disabled
+			label
+		>
+			{{ item.text }}
+		</v-chip>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from '@vue/composition-api';
+import formatTitle from '@directus/format-title';
+
+type Choice = {
+	value: string;
+	text: string;
+	foreground: string | null;
+	background: string | null;
+};
+
+export default defineComponent({
+	props: {
+		value: {
+			type: [String, Array] as PropType<string | string[]>,
+			required: true,
+		},
+		format: {
+			type: Boolean,
+			default: true,
+		},
+		choices: {
+			type: Array as PropType<Choice[]>,
+			default: () => [],
+		},
+		defaultBackground: {
+			type: String,
+			default: '#eceff1',
+		},
+		defaultForeground: {
+			type: String,
+			default: '#263238',
+		},
+		type: {
+			type: String,
+			validator: (val: string) => ['json', 'string'].includes(val),
+		},
+	},
+	setup(props) {
+		const items = computed(() => {
+			let items: string[];
+
+			if (props.value === null) items = [];
+			else if (props.type === 'string') items = [props.value as string];
+			else items = props.value as string[];
+
+			return items.map((item) => {
+				const choice = props.choices.find((choice) => choice.value === item);
+
+				if (choice === undefined) {
+					return {
+						value: item,
+						text: props.format ? formatTitle(item) : item,
+						foreground: props.defaultForeground,
+						background: props.defaultBackground,
+					};
+				} else {
+					return {
+						value: item,
+						text: choice.text || (props.format ? formatTitle(item) : item),
+						foreground: choice.foreground || props.defaultForeground,
+						background: choice.background || props.defaultBackground,
+					};
+				}
+			});
+		});
+
+		return { items };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.display-tags {
+	display: inline-block;
+}
+
+.v-chip + .v-chip {
+	margin-left: 4px;
+}
+</style>
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index d375dbd0b6..c10e7cbb22 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -103,6 +103,8 @@
 	"color_dot": "Color Dot",
 	"default_color": "Default Color",
 
+	"labels": "Labels",
+
 	"global": "Global",
 
 	"admins_have_all_permissions": "Admins have all permissions",

From 5a001d078ad101c809dee95898b00f0f534f2ea6 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 8 Sep 2020 10:09:12 -0400
Subject: [PATCH 18/19] I don't like package-lock.

---
 api/package-lock.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/api/package-lock.json b/api/package-lock.json
index 4e6e96957e..120203ccaf 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -3882,11 +3882,6 @@
         }
       }
     },
-    "knex-schema-inspector": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/knex-schema-inspector/-/knex-schema-inspector-0.0.9.tgz",
-      "integrity": "sha512-WN3m3dSxadXKtXYIyP3bRLHr786EjUXzbj6PweTc6CJKOOEWHA/FK8aOqNcYAFzjIT8opNR/iAgV8ZssKerDpA=="
-    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

From b33f154ef4d98c0c32b8cf3ec4ff87ee02e106eb Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 8 Sep 2020 10:09:15 -0400
Subject: [PATCH 19/19] Use finer scope for collection name translations

---
 api/src/database/seeds/system.yaml | 2 +-
 app/src/stores/collections.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/api/src/database/seeds/system.yaml b/api/src/database/seeds/system.yaml
index 61877a1f89..d51e26ef0e 100644
--- a/api/src/database/seeds/system.yaml
+++ b/api/src/database/seeds/system.yaml
@@ -648,7 +648,7 @@ rows:
             name: Translation
             type: string
             meta:
-              interface: text-input
+              interface: system-language
               width: half
               options:
                 placeholder: Enter a translation...
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index 199ced9f23..770ca0b571 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -34,13 +34,13 @@ export const useCollectionsStore = createStore({
 						const { locale, translation } = collection.meta.translation[i];
 
 						i18n.mergeLocaleMessage(locale, {
-							collections: {
+							collection_names: {
 								[collection.collection]: translation,
 							},
 						});
 					}
 
-					name = i18n.t(`collections.${collection.collection}`);
+					name = i18n.t(`collection_names.${collection.collection}`);
 				} else {
 					name = formatTitle(collection.collection);
 				}