Merge branch 'main' into room-cleaning

api/src/database/run-ast.ts

@@ -43,7 +43,7 @@ export default async function runAST(ast: AST, query = ast.query) {
 	let dbQuery = database.select([...toplevelFields, ...tempFields]).from(ast.name);
 
 	// Query defaults
-	query.limit = query.limit || 100;
+	query.limit = typeof query.limit === 'number' ? query.limit : 100;
 
 	if (query.limit === -1) {
 		delete query.limit;
@@ -119,7 +119,7 @@ export default async function runAST(ast: AST, query = ast.query) {
 			 * `n` items in total. This limit will then be re-applied in the stitching process
 			 * down below
 			 */
-			if (batchQuery.limit) {
+			if (typeof batchQuery.limit === 'number') {
 				tempLimit = batchQuery.limit;
 				batchQuery.limit = -1;
 			}
@@ -168,7 +168,7 @@ export default async function runAST(ast: AST, query = ast.query) {
 				});
 
 			// Reapply LIMIT query on a per-record basis
-			if (tempLimit) {
+			if (typeof tempLimit === 'number') {
 				resultsForCurrentRecord = resultsForCurrentRecord.slice(0, tempLimit);
 			}
 

api/src/database/seeds/system.yaml

@@ -342,7 +342,7 @@ tables:
   directus_presets:
     id:
       increments: true
-    title:
+    bookmark:
       type: string
       length: 255
     user:
@@ -366,13 +366,13 @@ tables:
       length: 100
     filters:
       type: json
-    view_type:
+    layout:
       type: string
       length: 100
       default: tabular
-    view_query:
+    layout_query:
       type: json
-    view_options:
+    layout_options:
       type: json
 
   directus_relations:
@@ -1560,12 +1560,12 @@ rows:
         locked: true
         special: json
       - collection: directus_presets
-        field: view_query
+        field: layout_query
         hidden: true
         locked: true
         special: json
       - collection: directus_presets
-        field: view_options
+        field: layout_options
         hidden: true
         locked: true
         special: json
@@ -1899,23 +1899,23 @@ rows:
 
   directus_presets:
     defaults:
-      title: null
+      bookmark: null
       user: null
       role: null
       collection: null
       search: null
       filters: '[]'
-      view_type: tabular
-      view_query: null
-      view_options: null
+      layout: tabular
+      layout_query: null
+      layout_options: null
 
     data:
       - collection: directus_files
-        view_type: cards
-        view_query:
+        layout: cards
+        layout_query:
           cards:
             sort: -uploaded_on
-        view_options:
+        layout_options:
           cards:
             icon: insert_drive_file
             title: '{{ title }}'
@@ -1924,8 +1924,8 @@ rows:
             imageFit: crop
 
       - collection: directus_users
-        view_type: cards
-        view_options:
+        layout: cards
+        layout_options:
           cards:
             icon: account_circle
             title: '{{ first_name }} {{ last_name }}'
@@ -1933,8 +1933,8 @@ rows:
             size: 4
 
       - collection: directus_activity
-        view_type: tabular
-        view_query:
+        layout: tabular
+        layout_query:
           tabular:
             sort: -action_on
             fields:
@@ -1942,7 +1942,7 @@ rows:
               - collection
               - action_on
               - action_by
-        view_options:
+        layout_options:
           tabular:
             widths:
               action: 100

api/src/middleware/sanitize-query.ts

@@ -16,10 +16,10 @@ const sanitizeQuery: RequestHandler = (req, res, next) => {
 		fields: sanitizeFields(req.query.fields) || ['*'],
 	};
 
-	if (req.query.limit) {
+	if (req.query.limit !== undefined) {
 		const limit = sanitizeLimit(req.query.limit);
 
-		if (limit) {
+		if (typeof limit === 'number') {
 			query.limit = limit;
 		}
 	}
@@ -103,7 +103,7 @@ function sanitizeFilter(rawFilter: any, accountability: Accountability | null) {
 }
 
 function sanitizeLimit(rawLimit: any) {
-	if (!rawLimit) return null;
+	if (rawLimit === undefined || rawLimit === null) return null;
 	return Number(rawLimit);
 }
 
@@ -131,4 +131,6 @@ function sanitizeMeta(rawMeta: any) {
 	if (Array.isArray(rawMeta)) {
 		return rawMeta;
 	}
+
+	return [rawMeta];
 }

api/src/utils/apply-query.ts

@@ -11,7 +11,7 @@ export default async function applyQuery(collection: string, dbQuery: QueryBuild
 		dbQuery.orderBy(query.sort);
 	}
 
-	if (query.limit && !query.offset) {
+	if (typeof query.limit === 'number' && !query.offset) {
 		dbQuery.limit(query.limit);
 	}
 
@@ -109,14 +109,14 @@ export function applyFilter(dbQuery: QueryBuilder, filter: Filter) {
 			}
 
 			if (operator === '_empty') {
-				dbQuery.andWhere(query => {
+				dbQuery.andWhere((query) => {
 					query.whereNull(key);
 					query.orWhere(key, '=', '');
 				});
 			}
 
 			if (operator === '_nempty') {
-				dbQuery.andWhere(query => {
+				dbQuery.andWhere((query) => {
 					query.whereNotNull(key);
 					query.orWhere(key, '!=', '');
 				});

app/.storybook/mock-data/collections.json

@@ -188,14 +188,14 @@
 					"hidden_browse": false,
 					"required": false,
 					"options": {
-						"viewType": "cards",
-						"viewOptions": {
+						"layout": "cards",
+						"layoutOptions": {
 							"title": "title",
 							"subtitle": "type",
 							"content": "description",
 							"src": "data"
 						},
-						"viewQuery": [],
+						"layoutQuery": [],
 						"filters": []
 					},
 					"locked": 0,
@@ -316,14 +316,14 @@
 					"hidden_browse": false,
 					"required": false,
 					"options": {
-						"viewType": "cards",
-						"viewOptions": {
+						"layout": "cards",
+						"layoutOptions": {
 							"title": "title",
 							"subtitle": "type",
 							"content": "description",
 							"src": "data"
 						},
-						"viewQuery": [],
+						"layoutQuery": [],
 						"filters": []
 					},
 					"locked": 0,
@@ -4183,14 +4183,14 @@
 					"hidden_browse": false,
 					"required": false,
 					"options": {
-						"viewType": "cards",
-						"viewOptions": {
+						"layout": "cards",
+						"layoutOptions": {
 							"title": "title",
 							"subtitle": "type",
 							"content": "description",
 							"src": "data"
 						},
-						"viewQuery": [],
+						"layoutQuery": [],
 						"filters": []
 					},
 					"locked": 0,
@@ -6128,9 +6128,9 @@
 					"group": null,
 					"length": null
 				},
-				"view_type": {
+				"layout": {
 					"collection": "directus_collection_presets",
-					"field": "view_type",
+					"field": "layout",
 					"datatype": "VARCHAR",
 					"unique": false,
 					"primary_key": false,
@@ -6156,9 +6156,9 @@
 					"group": null,
 					"length": "100"
 				},
-				"view_query": {
+				"layout_query": {
 					"collection": "directus_collection_presets",
-					"field": "view_query",
+					"field": "layout_query",
 					"datatype": "TEXT",
 					"unique": false,
 					"primary_key": false,
@@ -6184,9 +6184,9 @@
 					"group": null,
 					"length": null
 				},
-				"view_options": {
+				"layout_options": {
 					"collection": "directus_collection_presets",
-					"field": "view_options",
+					"field": "layout_options",
 					"datatype": "TEXT",
 					"unique": false,
 					"primary_key": false,

app/.storybook/mock-data/fields.json

@@ -186,14 +186,14 @@
 			"hidden_browse": false,
 			"required": false,
 			"options": {
-				"viewType": "cards",
-				"viewOptions": {
+				"layout": "cards",
+				"layoutOptions": {
 					"title": "title",
 					"subtitle": "type",
 					"content": "description",
 					"src": "data"
 				},
-				"viewQuery": [],
+				"layoutQuery": [],
 				"filters": []
 			},
 			"locked": 0,
@@ -317,14 +317,14 @@
 			"hidden_browse": false,
 			"required": false,
 			"options": {
-				"viewType": "cards",
-				"viewOptions": {
+				"layout": "cards",
+				"layoutOptions": {
 					"title": "title",
 					"subtitle": "type",
 					"content": "description",
 					"src": "data"
 				},
-				"viewQuery": [],
+				"layoutQuery": [],
 				"filters": []
 			},
 			"locked": 0,
@@ -2078,7 +2078,7 @@
 		},
 		{
 			"collection": "directus_collection_presets",
-			"field": "view_type",
+			"field": "layout",
 			"datatype": "VARCHAR",
 			"unique": false,
 			"primary_key": false,
@@ -2107,7 +2107,7 @@
 		},
 		{
 			"collection": "directus_collection_presets",
-			"field": "view_query",
+			"field": "layout_query",
 			"datatype": "TEXT",
 			"unique": false,
 			"primary_key": false,
@@ -2136,7 +2136,7 @@
 		},
 		{
 			"collection": "directus_collection_presets",
-			"field": "view_options",
+			"field": "layout_options",
 			"datatype": "TEXT",
 			"unique": false,
 			"primary_key": false,
@@ -9473,14 +9473,14 @@
 			"hidden_browse": false,
 			"required": false,
 			"options": {
-				"viewType": "cards",
-				"viewOptions": {
+				"layout": "cards",
+				"layoutOptions": {
 					"title": "title",
 					"subtitle": "type",
 					"content": "description",
 					"src": "data"
 				},
-				"viewQuery": [],
+				"layoutQuery": [],
 				"filters": []
 			},
 			"locked": 0,

app/src/composables/use-preset/types.ts

@@ -14,8 +14,8 @@ export type Preset = {
 	title: string | null;
 	user: number | null;
 
-	view_options: Record<string, any>;
+	layout_options: Record<string, any>;
 
-	view_query: Record<string, any>;
-	view_type: string | null;
+	layout_query: Record<string, any>;
+	layout: string | null;
 };

app/src/composables/use-preset/use-preset.ts

@@ -57,19 +57,19 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		initLocalPreset();
 	});
 
-	const viewOptions = computed<Record<string, any>>({
+	const layoutOptions = computed<Record<string, any>>({
 		get() {
-			if (!localPreset.value.view_type) return null;
-			return localPreset.value.view_options?.[localPreset.value.view_type] || null;
+			if (!localPreset.value.layout) return null;
+			return localPreset.value.layout_options?.[localPreset.value.layout] || null;
 		},
 		set(val) {
-			if (!localPreset.value.view_type) return null;
+			if (!localPreset.value.layout) return null;
 
 			localPreset.value = {
 				...localPreset.value,
-				view_options: {
-					...localPreset.value.view_options,
-					[localPreset.value.view_type]: val,
+				layout_options: {
+					...localPreset.value.layout_options,
+					[localPreset.value.layout]: val,
 				},
 			};
 
@@ -77,18 +77,18 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		},
 	});
 
-	const viewQuery = computed<Record<string, any>>({
+	const layoutQuery = computed<Record<string, any>>({
 		get() {
-			if (!localPreset.value.view_type) return null;
-			return localPreset.value.view_query?.[localPreset.value.view_type] || null;
+			if (!localPreset.value.layout) return null;
+			return localPreset.value.layout_query?.[localPreset.value.layout] || null;
 		},
 		set(val) {
-			if (!localPreset.value.view_type) return null;
+			if (!localPreset.value.layout) return null;
 			localPreset.value = {
 				...localPreset.value,
-				view_query: {
-					...localPreset.value.view_query,
-					[localPreset.value.view_type]: val,
+				layout_query: {
+					...localPreset.value.layout_query,
+					[localPreset.value.layout]: val,
 				},
 			};
 
@@ -96,14 +96,14 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		},
 	});
 
-	const viewType = computed<string | null>({
+	const layout = computed<string | null>({
 		get() {
-			return localPreset.value.view_type || 'tabular';
+			return localPreset.value.layout || 'tabular';
 		},
 		set(val) {
 			localPreset.value = {
 				...localPreset.value,
-				view_type: val,
+				layout: val,
 			};
 
 			autoSave();
@@ -138,14 +138,14 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		},
 	});
 
-	const title = computed<string | null>({
+	const bookmarkTitle = computed<string | null>({
 		get() {
-			return localPreset.value?.title || null;
+			return localPreset.value?.bookmark || null;
 		},
 		set(newTitle: string | null) {
 			localPreset.value = {
 				...localPreset.value,
-				title: newTitle,
+				bookmark: newTitle,
 			};
 
 			// This'll save immediately
@@ -155,14 +155,14 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 
 	return {
 		bookmarkExists,
-		viewType,
-		viewOptions,
-		viewQuery,
+		layout,
+		layoutOptions,
+		layoutQuery,
 		filters,
 		searchQuery,
 		savePreset,
 		saveCurrentAsBookmark,
-		title,
+		bookmarkTitle,
 		resetPreset,
 		bookmarkSaved,
 		bookmarkIsMine,
@@ -173,9 +173,9 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	async function resetPreset() {
 		localPreset.value = {
 			...localPreset.value,
-			view_query: null,
-			view_options: null,
-			view_type: 'tabular',
+			layout_query: null,
+			layout_options: null,
+			layout: 'tabular',
 			filters: null,
 			search_query: null,
 		};
@@ -196,10 +196,10 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 			};
 		}
 
-		if (!localPreset.value.view_type) {
+		if (!localPreset.value.layout) {
 			localPreset.value = {
 				...localPreset.value,
-				view_type: 'tabular',
+				layout: 'tabular',
 			};
 		}
 

app/src/interfaces/dropdown/index.ts

@@ -97,5 +97,5 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
-	recommendedDisplays: ['badge'],
+	recommendedDisplays: ['labels'],
 }));

app/src/lang/af-ZA/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/af-ZA/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ar-SA/index.json

@@ -523,7 +523,7 @@
   "values": "قيم",
   "version": "إصدار",
   "version_and_updates": "إصدار وتحديثات",
-  "view_type": "معاية كـ...",
+  "layout": "معاية كـ...",
   "visible_all_users": "مرئية لجميع المستخدمين",
   "webhook_count": "لاتوجد روابط ويب | رابط ويب | {count} روابط ويب",
   "weeks": {

app/src/lang/ar-SA/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "ملف",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ca-ES/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/ca-ES/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/cs-CZ/index.json

@@ -523,7 +523,7 @@
   "values": "Hodnoty",
   "version": "Verze",
   "version_and_updates": "Verze a aktualizace",
-  "view_type": "Zobrazit jako...",
+  "layout": "Zobrazit jako...",
   "visible_all_users": "Zobrazit pro všechny uživatele",
   "webhook_count": "Žádné webhooky | 1 Webhook | {count} Webhooků",
   "weeks": {

app/src/lang/cs-CZ/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Soubor",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/da-DK/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/da-DK/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/de-DE/index.json

@@ -523,7 +523,7 @@
   "values": "Werte",
   "version": "Version",
   "version_and_updates": "Version und Aktualisierungen",
-  "view_type": "Ansehen als...",
+  "layout": "Ansehen als...",
   "visible_all_users": "Für alle Benutzer sichtbar",
   "webhook_count": "Keine Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/de-DE/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Datei",
-			"view_type": "Ansicht",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "Ansicht",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/el-GR/index.json

@@ -523,7 +523,7 @@
   "values": "Τιμές",
   "version": "Έκδοση",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/el-GR/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Αρχείο",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/en-US/index.json

@@ -120,8 +120,8 @@
 	"create_field": "Create Field",
 	"update_field": "Update Field",
 
-	"creating_new_field": "Creating New Field within {collection}",
-	"updating_field_field": "Updating Field {field}",
+	"creating_new_field": "{collection}: New Field",
+	"updating_field_field": "{collection}: \"{field}\" Field",
 	"within_collection": "Within {collection}",
 
 	"field_standard": "Standard",

app/src/lang/es-419/index.json

@@ -523,7 +523,7 @@
   "values": "Valores",
   "version": "Versión",
   "version_and_updates": "Versión y actualizaciones",
-  "view_type": "Ver como...",
+  "layout": "Ver como...",
   "visible_all_users": "Visible para todos los usuarios",
   "webhook_count": "Sin Webhooks | Un Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/es-419/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Archivo",
-			"view_type": "Tipo de Vista",
-			"view_type_comment": "Seleccionar en que forma quieres ver los archivos",
-			"view_options": "Opciones de Vista",
-			"view_options_comment": "Establecer las opciones de vista a usar para los archivos",
-			"view_query": "Ver Consulta",
-			"view_query_comment": "Establecer la vista de consulta a usar para los archivos",
+			"layout": "Tipo de Vista",
+			"layout_comment": "Seleccionar en que forma quieres ver los archivos",
+			"layout_options": "Opciones de Vista",
+			"layout_options_comment": "Establecer las opciones de vista a usar para los archivos",
+			"layout_query": "Ver Consulta",
+			"layout_query_comment": "Establecer la vista de consulta a usar para los archivos",
 			"filters": "Filtros",
 			"filters_comment": "Qué filtros usar",
 			"accept": "Aceptar los Tipos de Archivo",

app/src/lang/es-CL/index.json

@@ -523,7 +523,7 @@
   "values": "Valores",
   "version": "Versión",
   "version_and_updates": "Versión y actualización",
-  "view_type": "Visto como...",
+  "layout": "Visto como...",
   "visible_all_users": "Visible para todos los usuarios",
   "webhook_count": "Sin Webhooks | Un Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/es-CL/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Archivo",
-			"view_type": "Tipo de Vista",
-			"view_type_comment": "Seleccionar en que forma quieres ver los archivos",
-			"view_options": "Opciones de Vista",
-			"view_options_comment": "Establecer las opciones de vista a usar para los archivos",
-			"view_query": "Ver Consulta",
-			"view_query_comment": "Establecer la vista de consulta a usar para los archivos",
+			"layout": "Tipo de Vista",
+			"layout_comment": "Seleccionar en que forma quieres ver los archivos",
+			"layout_options": "Opciones de Vista",
+			"layout_options_comment": "Establecer las opciones de vista a usar para los archivos",
+			"layout_query": "Ver Consulta",
+			"layout_query_comment": "Establecer la vista de consulta a usar para los archivos",
 			"filters": "Filtros",
 			"filters_comment": "Qué filtros usar",
 			"accept": "Aceptar los Tipos de Archivo",

app/src/lang/es-ES/index.json

@@ -523,7 +523,7 @@
   "values": "Valores",
   "version": "Versión",
   "version_and_updates": "Versión y actualizaciones",
-  "view_type": "Ver como...",
+  "layout": "Ver como...",
   "visible_all_users": "Visible para todos los usuarios",
   "webhook_count": "Sin Webhooks | Un Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/es-ES/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Archivo",
-			"view_type": "Tipo de Vista",
-			"view_type_comment": "Seleccionar en que forma quieres ver los archivos",
-			"view_options": "Opciones de Vista",
-			"view_options_comment": "Establecer las opciones de vista a usar para los archivos",
-			"view_query": "Ver Consulta",
-			"view_query_comment": "Establecer la vista de consulta a usar para los archivos",
+			"layout": "Tipo de Vista",
+			"layout_comment": "Seleccionar en que forma quieres ver los archivos",
+			"layout_options": "Opciones de Vista",
+			"layout_options_comment": "Establecer las opciones de vista a usar para los archivos",
+			"layout_query": "Ver Consulta",
+			"layout_query_comment": "Establecer la vista de consulta a usar para los archivos",
 			"filters": "Filtros",
 			"filters_comment": "Qué filtros usar",
 			"accept": "Aceptar los Tipos de Archivo",

app/src/lang/fi-FI/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/fi-FI/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/fr-FR/index.json

@@ -523,7 +523,7 @@
   "values": "Valeurs",
   "version": "Version",
   "version_and_updates": "Version et mises à jour",
-  "view_type": "Voir comme…",
+  "layout": "Voir comme…",
   "visible_all_users": "Visible à tous les utilisateurs",
   "webhook_count": "Aucun Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/fr-FR/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Fichier",
-			"view_type": "Voir le type",
-			"view_type_comment": "Sélectionnez la façon dont vous souhaitez afficher les fichiers",
-			"view_options": "Afficher les options",
-			"view_options_comment": "Définir les options d'affichage à utiliser pour les fichiers",
-			"view_query": "Voir la requête",
-			"view_query_comment": "Définir la requête de vue à utiliser pour les fichiers",
+			"layout": "Voir le type",
+			"layout_comment": "Sélectionnez la façon dont vous souhaitez afficher les fichiers",
+			"layout_options": "Afficher les options",
+			"layout_options_comment": "Définir les options d'affichage à utiliser pour les fichiers",
+			"layout_query": "Voir la requête",
+			"layout_query_comment": "Définir la requête de vue à utiliser pour les fichiers",
 			"filters": "Filtres",
 			"filters_comment": "Quels filtres utiliser",
 			"accept": "Accepter les types de fichier",

app/src/lang/he-IL/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/he-IL/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/hu-HU/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/hu-HU/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/id-ID/index.json

@@ -523,7 +523,7 @@
   "values": "Nilai",
   "version": "Versi",
   "version_and_updates": "Versi dan Pembaruan",
-  "view_type": "Lihat Sebagai...",
+  "layout": "Lihat Sebagai...",
   "visible_all_users": "Terlihat oleh semua pengguna",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/id-ID/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Berkas",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/is-IS/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/is-IS/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/it-IT/index.json

@@ -523,7 +523,7 @@
   "values": "Valori",
   "version": "Versione",
   "version_and_updates": "Versione e aggiornamenti",
-  "view_type": "Visualizza come...",
+  "layout": "Visualizza come...",
   "visible_all_users": "Visibile per tutti gli utenti",
   "webhook_count": "Nessun webhook | 1 Webhook | {count} Webhook",
   "weeks": {

app/src/lang/it-IT/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ja-JP/index.json

@@ -523,7 +523,7 @@
   "values": "値",
   "version": "バージョン",
   "version_and_updates": "バージョンおよび更新",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "全ユーザーで閲覧可能",
   "webhook_count": "Webhook 無し | 1つのWebhook | {count} 個のWebhook",
   "weeks": {

app/src/lang/ja-JP/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "ファイル",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ko-KR/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/ko-KR/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/lt-LT/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/lt-LT/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ms-MY/index.json

@@ -523,7 +523,7 @@
   "values": "Nilai-nilai",
   "version": "Versi",
   "version_and_updates": "Versi dan Kemaskini",
-  "view_type": "Lihat Sebagai...",
+  "layout": "Lihat Sebagai...",
   "visible_all_users": "Dilihat untuk semua pengguna",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/ms-MY/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Fail",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/nl-NL/index.json

@@ -525,7 +525,7 @@
   "values": "Waardes",
   "version": "Versie",
   "version_and_updates": "Versie en Updates",
-  "view_type": "Bekijk als...",
+  "layout": "Bekijk als...",
   "visible_all_users": "Zichtbaar voor alle gebruikers",
   "webhook_count": "Geen webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/nl-NL/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Bestand",
-			"view_type": "Weergave Type",
-			"view_type_comment": "Selecteer op welke manier u de bestanden wilt bekijken",
-			"view_options": "Weergaveopties",
-			"view_options_comment": "Stel de te gebruiken weergave opties in voor de bestanden",
-			"view_query": "Weergave Query",
-			"view_query_comment": "Stel de te gebruiken weergave in voor de bestanden",
+			"layout": "Weergave Type",
+			"layout_comment": "Selecteer op welke manier u de bestanden wilt bekijken",
+			"layout_options": "Weergaveopties",
+			"layout_options_comment": "Stel de te gebruiken weergave opties in voor de bestanden",
+			"layout_query": "Weergave Query",
+			"layout_query_comment": "Stel de te gebruiken weergave in voor de bestanden",
 			"filters": "Filters",
 			"filters_comment": "Welke filters te gebruiken",
 			"accept": "Accepteer bestandstypes",

app/src/lang/no-NO/index.json

@@ -523,7 +523,7 @@
   "values": "Verdier",
   "version": "Versjon",
   "version_and_updates": "Versjon og oppdateringer",
-  "view_type": "Vis som...",
+  "layout": "Vis som...",
   "visible_all_users": "Synlig for alle brukere",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/no-NO/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Fil",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/pl-PL/index.json

@@ -523,7 +523,7 @@
   "values": "Wartości",
   "version": "Wersja",
   "version_and_updates": "Wersje i aktualizacje",
-  "view_type": "Pokaż jako...",
+  "layout": "Pokaż jako...",
   "visible_all_users": "Widoczne dla wszystkich użytkowników",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/pl-PL/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Plik",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/pt-BR/index.json

@@ -523,7 +523,7 @@
   "values": "Valores",
   "version": "Versão",
   "version_and_updates": "Versão e alterações",
-  "view_type": "Ver como...",
+  "layout": "Ver como...",
   "visible_all_users": "Visível para todos os usuários",
   "webhook_count": "Sem webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/pt-BR/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Arquivo",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/pt-PT/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/pt-PT/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ro-RO/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/ro-RO/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/ru-RU/index.json

@@ -523,7 +523,7 @@
   "values": "Значения",
   "version": "Версия",
   "version_and_updates": "Версия и Обновления",
-  "view_type": "Посмотреть как...",
+  "layout": "Посмотреть как...",
   "visible_all_users": "Видно всем пользователям",
   "webhook_count": "Нет вебхуков | 1 вебхук | {count} вебхуков",
   "weeks": {

app/src/lang/ru-RU/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Файл",
-			"view_type": "Просмотр типа",
-			"view_type_comment": "Выберите, каким образом вы хотите просмотреть файлы",
-			"view_options": "Параметры просмотра",
-			"view_options_comment": "Установите параметры просмотра для файлов",
-			"view_query": "Просмотр запроса",
-			"view_query_comment": "Установить запрос для просмотра файлов",
+			"layout": "Просмотр типа",
+			"layout_comment": "Выберите, каким образом вы хотите просмотреть файлы",
+			"layout_options": "Параметры просмотра",
+			"layout_options_comment": "Установите параметры просмотра для файлов",
+			"layout_query": "Просмотр запроса",
+			"layout_query_comment": "Установить запрос для просмотра файлов",
 			"filters": "Фильтры",
 			"filters_comment": "Какие фильтры использовать",
 			"accept": "Принимать типы файлов",

app/src/lang/sr-SP/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/sr-SP/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/sv-SE/index.json

@@ -523,7 +523,7 @@
   "values": "Värden",
   "version": "Version",
   "version_and_updates": "Version och uppdateringar",
-  "view_type": "Visa som...",
+  "layout": "Visa som...",
   "visible_all_users": "Synlig för alla användare",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/sv-SE/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Fil",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/tr-TR/index.json

@@ -523,7 +523,7 @@
   "values": "Değerler",
   "version": "Versiyon",
   "version_and_updates": "Versiyon ve Güncellemeler",
-  "view_type": "Şu Şekilde Görüntüle...",
+  "layout": "Şu Şekilde Görüntüle...",
   "visible_all_users": "Tüm kullanıcılar tarafından görüntülenebilir",
   "webhook_count": "Ağ kancası yok | 1 Ağ Kancası | {count} Ağ Kancası",
   "weeks": {

app/src/lang/tr-TR/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Dosya",
-			"view_type": "Görünüm Tipi",
-			"view_type_comment": "Dosyaları hangi yolla görüntülemek istediğinizi seçin",
-			"view_options": "Görünüm Seçenekleri",
-			"view_options_comment": "Dosyalar için kullanılacak görünüm seçeneklerini ayarlayın",
-			"view_query": "Görünüm Sorgusu",
-			"view_query_comment": "Dosyalar için kullanılacak görünüm sorgusunu ayarlayın",
+			"layout": "Görünüm Tipi",
+			"layout_comment": "Dosyaları hangi yolla görüntülemek istediğinizi seçin",
+			"layout_options": "Görünüm Seçenekleri",
+			"layout_options_comment": "Dosyalar için kullanılacak görünüm seçeneklerini ayarlayın",
+			"layout_query": "Görünüm Sorgusu",
+			"layout_query_comment": "Dosyalar için kullanılacak görünüm sorgusunu ayarlayın",
 			"filters": "Filtreler",
 			"filters_comment": "Hangi filtreler kullanılacak",
 			"accept": "Dosya Türlerini Kabul Et",

app/src/lang/uk-UA/index.json

@@ -523,7 +523,7 @@
   "values": "Значення",
   "version": "Версія",
   "version_and_updates": "Версія та оновлення",
-  "view_type": "Переглянути як...",
+  "layout": "Переглянути як...",
   "visible_all_users": "Видимі для всіх користувачів",
   "webhook_count": "Немає Вебхуків | Один Вебхук | {count} вебхуків",
   "weeks": {

app/src/lang/uk-UA/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "Файл",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/vi-VN/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "Version",
   "version_and_updates": "Version and Updates",
-  "view_type": "View As...",
+  "layout": "View As...",
   "visible_all_users": "Visible for all users",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/vi-VN/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "File",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/lang/zh-CN/index.json

@@ -523,7 +523,7 @@
   "values": "值",
   "version": "版本",
   "version_and_updates": "版本与升级",
-  "view_type": "查看为...",
+  "layout": "查看为...",
   "visible_all_users": "所有用户可见",
   "webhook_count": "没有Webhook | 1个Webhook | {count} 个Webhook",
   "weeks": {

app/src/lang/zh-CN/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "文件",
-			"view_type": "View Type",
-			"view_type_comment": "选择你要查看文件的方式",
-			"view_options": "View Options",
-			"view_options_comment": "设置文件的视图选项",
-			"view_query": "View Query",
-			"view_query_comment": "设置用于该文件的视图查询",
+			"layout": "View Type",
+			"layout_comment": "选择你要查看文件的方式",
+			"layout_options": "View Options",
+			"layout_options_comment": "设置文件的视图选项",
+			"layout_query": "View Query",
+			"layout_query_comment": "设置用于该文件的视图查询",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "允许的文件类型",

app/src/lang/zh-TW/index.json

@@ -523,7 +523,7 @@
   "values": "Values",
   "version": "版本",
   "version_and_updates": "版本更新",
-  "view_type": "檢視",
+  "layout": "檢視",
   "visible_all_users": "所有使用者皆可檢視",
   "webhook_count": "No Webhooks | 1 Webhook | {count} Webhooks",
   "weeks": {

app/src/lang/zh-TW/interfaces.json

@@ -172,12 +172,12 @@
 		},
 		"file": {
 			"file": "檔案",
-			"view_type": "View Type",
-			"view_type_comment": "Select in what way you want to view the files",
-			"view_options": "View Options",
-			"view_options_comment": "Set the view options to use for the files",
-			"view_query": "View Query",
-			"view_query_comment": "Set the view query to use for the files",
+			"layout": "View Type",
+			"layout_comment": "Select in what way you want to view the files",
+			"layout_options": "View Options",
+			"layout_options_comment": "Set the view options to use for the files",
+			"layout_query": "View Query",
+			"layout_query_comment": "Set the view query to use for the files",
 			"filters": "Filters",
 			"filters_comment": "What filters to use",
 			"accept": "Accept File Types",

app/src/layouts/cards/cards.vue

@@ -133,7 +133,7 @@ import { clone } from 'lodash';
 
 type Item = Record<string, any>;
 
-type ViewOptions = {
+type layoutOptions = {
 	size?: number;
 	icon?: string;
 	imageSource?: string;
@@ -142,7 +142,7 @@ type ViewOptions = {
 	imageFit?: 'crop' | 'contain';
 };
 
-type ViewQuery = {
+type layoutQuery = {
 	fields?: string[];
 	sort?: string;
 	limit?: number;
@@ -159,12 +159,12 @@ export default defineComponent({
 			type: Array as PropType<Item[]>,
 			default: undefined,
 		},
-		viewOptions: {
-			type: Object as PropType<ViewOptions>,
+		layoutOptions: {
+			type: Object as PropType<layoutOptions>,
 			default: null,
 		},
-		viewQuery: {
-			type: Object as PropType<ViewQuery>,
+		layoutQuery: {
+			type: Object as PropType<layoutQuery>,
 			default: null,
 		},
 		filters: {
@@ -195,8 +195,8 @@ export default defineComponent({
 		const mainElement = inject('main-element', ref<Element | null>(null));
 
 		const _selection = useSync(props, 'selection', emit);
-		const _viewOptions = useSync(props, 'viewOptions', emit);
-		const _viewQuery = useSync(props, 'viewQuery', emit);
+		const _layoutOptions = useSync(props, 'layoutOptions', emit);
+		const _layoutQuery = useSync(props, 'layoutQuery', emit);
 		const _filters = useSync(props, 'filters', emit);
 		const _searchQuery = useSync(props, 'searchQuery', emit);
 
@@ -221,8 +221,8 @@ export default defineComponent({
 			});
 		});
 
-		const { size, icon, imageSource, title, subtitle, imageFit } = useViewOptions();
-		const { sort, limit, page, fields } = useViewQuery();
+		const { size, icon, imageSource, title, subtitle, imageFit } = uselayoutOptions();
+		const { sort, limit, page, fields } = uselayoutQuery();
 
 		const { items, loading, error, totalPages, itemCount, getItems } = useItems(collection, {
 			sort,
@@ -230,7 +230,7 @@ export default defineComponent({
 			page,
 			fields: fields,
 			filters: _filters,
-			searchQuery,
+			searchQuery: _searchQuery,
 		});
 
 		const newLink = computed(() => {
@@ -302,7 +302,7 @@ export default defineComponent({
 			});
 		}
 
-		function useViewOptions() {
+		function uselayoutOptions() {
 			const size = createViewOption<number>('size', 4);
 			const icon = createViewOption('icon', 'box');
 			const title = createViewOption<string>('title', null);
@@ -312,14 +312,14 @@ export default defineComponent({
 
 			return { size, icon, imageSource, title, subtitle, imageFit };
 
-			function createViewOption<T>(key: keyof ViewOptions, defaultValue: any) {
+			function createViewOption<T>(key: keyof layoutOptions, defaultValue: any) {
 				return computed<T>({
 					get() {
-						return _viewOptions.value?.[key] !== undefined ? _viewOptions.value?.[key] : defaultValue;
+						return _layoutOptions.value?.[key] !== undefined ? _layoutOptions.value?.[key] : defaultValue;
 					},
 					set(newValue: T) {
-						_viewOptions.value = {
-							..._viewOptions.value,
+						_layoutOptions.value = {
+							..._layoutOptions.value,
 							[key]: newValue,
 						};
 					},
@@ -327,11 +327,11 @@ export default defineComponent({
 			}
 		}
 
-		function useViewQuery() {
+		function uselayoutQuery() {
 			const page = ref(1);
 
-			const sort = createViewQueryOption<string>('sort', availableFields.value[0].field);
-			const limit = createViewQueryOption<number>('limit', 25);
+			const sort = createlayoutQueryOption<string>('sort', availableFields.value[0].field);
+			const limit = createlayoutQueryOption<number>('limit', 25);
 
 			const fields = computed<string[]>(() => {
 				if (!primaryKeyField.value) return [];
@@ -369,15 +369,15 @@ export default defineComponent({
 
 			return { sort, limit, page, fields };
 
-			function createViewQueryOption<T>(key: keyof ViewQuery, defaultValue: any) {
+			function createlayoutQueryOption<T>(key: keyof layoutQuery, defaultValue: any) {
 				return computed<T>({
 					get() {
-						return _viewQuery.value?.[key] || defaultValue;
+						return _layoutQuery.value?.[key] || defaultValue;
 					},
 					set(newValue: T) {
 						page.value = 1;
-						_viewQuery.value = {
-							..._viewQuery.value,
+						_layoutQuery.value = {
+							..._layoutQuery.value,
 							[key]: newValue,
 						};
 					},

app/src/layouts/tabular/tabular.vue

@@ -157,7 +157,7 @@ import i18n from '@/lang';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import hideDragImage from '@/utils/hide-drag-image';
 
-type ViewOptions = {
+type layoutOptions = {
 	widths?: {
 		[field: string]: number;
 	};
@@ -165,7 +165,7 @@ type ViewOptions = {
 	spacing?: 'comfortable' | 'cozy' | 'compact';
 };
 
-type ViewQuery = {
+type layoutQuery = {
 	fields?: string[];
 	sort?: string;
 };
@@ -181,12 +181,12 @@ export default defineComponent({
 			type: Array as PropType<Item[]>,
 			default: undefined,
 		},
-		viewOptions: {
-			type: Object as PropType<ViewOptions>,
+		layoutOptions: {
+			type: Object as PropType<layoutOptions>,
 			default: () => ({}),
 		},
-		viewQuery: {
-			type: Object as PropType<ViewQuery>,
+		layoutQuery: {
+			type: Object as PropType<layoutQuery>,
 			default: () => ({}),
 		},
 		filters: {
@@ -215,8 +215,8 @@ export default defineComponent({
 		const mainElement = inject('main-element', ref<Element | null>(null));
 
 		const _selection = useSync(props, 'selection', emit);
-		const _viewOptions: Ref<any> = useSync(props, 'viewOptions', emit);
-		const _viewQuery: Ref<any> = useSync(props, 'viewQuery', emit);
+		const _layoutOptions: Ref<any> = useSync(props, 'layoutOptions', emit);
+		const _layoutQuery: Ref<any> = useSync(props, 'layoutQuery', emit);
 		const _filters = useSync(props, 'filters', emit);
 		const _searchQuery = useSync(props, 'searchQuery', emit);
 
@@ -318,12 +318,12 @@ export default defineComponent({
 
 			const sort = computed({
 				get() {
-					return _viewQuery.value?.sort || primaryKeyField.value?.field;
+					return _layoutQuery.value?.sort || primaryKeyField.value?.field;
 				},
 				set(newSort: string) {
 					page.value = 1;
-					_viewQuery.value = {
-						...(_viewQuery.value || {}),
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
 						sort: newSort,
 					};
 				},
@@ -331,12 +331,12 @@ export default defineComponent({
 
 			const limit = computed({
 				get() {
-					return _viewOptions.value?.limit || 25;
+					return _layoutOptions.value?.limit || 25;
 				},
 				set(newLimit: number) {
 					page.value = 1;
-					_viewOptions.value = {
-						...(_viewOptions.value || {}),
+					_layoutOptions.value = {
+						...(_layoutOptions.value || {}),
 						limit: newLimit,
 					};
 				},
@@ -344,18 +344,18 @@ export default defineComponent({
 
 			const fields = computed({
 				get() {
-					if (_viewQuery.value?.fields) {
+					if (_layoutQuery.value?.fields) {
 						// This shouldn't be the case, but double check just in case it's stored
 						// differently in the DB from previous versions
-						if (typeof _viewQuery.value.fields === 'string') {
-							return (_viewQuery.value.fields as string).split(',');
+						if (typeof _layoutQuery.value.fields === 'string') {
+							return (_layoutQuery.value.fields as string).split(',');
 						}
 
-						if (Array.isArray(_viewQuery.value.fields)) return _viewQuery.value.fields;
+						if (Array.isArray(_layoutQuery.value.fields)) return _layoutQuery.value.fields;
 					}
 
 					const fields =
-						_viewQuery.value?.fields ||
+						_layoutQuery.value?.fields ||
 						availableFields.value
 							.filter((field: Field) => {
 								return field.schema?.is_primary_key === false;
@@ -366,8 +366,8 @@ export default defineComponent({
 					return fields;
 				},
 				set(newFields: string[]) {
-					_viewQuery.value = {
-						...(_viewQuery.value || {}),
+					_layoutQuery.value = {
+						...(_layoutQuery.value || {}),
 						fields: newFields,
 					};
 				},
@@ -390,15 +390,15 @@ export default defineComponent({
 			const localWidths = ref<{ [field: string]: number }>({});
 
 			watch(
-				() => _viewOptions.value,
+				() => _layoutOptions.value,
 				() => {
 					localWidths.value = {};
 				}
 			);
 
-			const saveWidthsToViewOptions = debounce(() => {
-				_viewOptions.value = {
-					...(_viewOptions.value || {}),
+			const saveWidthsTolayoutOptions = debounce(() => {
+				_layoutOptions.value = {
+					...(_layoutOptions.value || {}),
 					widths: localWidths.value,
 				};
 			}, 350);
@@ -419,7 +419,7 @@ export default defineComponent({
 					return activeFields.value.map((field) => ({
 						text: field.name,
 						value: field.field,
-						width: localWidths.value[field.field] || _viewOptions.value?.widths?.[field.field] || null,
+						width: localWidths.value[field.field] || _layoutOptions.value?.widths?.[field.field] || null,
 						field: {
 							display: field.meta?.display,
 							displayOptions: field.meta?.display_options,
@@ -441,17 +441,17 @@ export default defineComponent({
 
 					localWidths.value = widths;
 
-					saveWidthsToViewOptions();
+					saveWidthsTolayoutOptions();
 				},
 			});
 
 			const tableSpacing = computed({
 				get() {
-					return _viewOptions.value?.spacing || 'cozy';
+					return _layoutOptions.value?.spacing || 'cozy';
 				},
 				set(newSpacing: 'compact' | 'cozy' | 'comfortable') {
-					_viewOptions.value = {
-						...(_viewOptions.value || {}),
+					_layoutOptions.value = {
+						...(_layoutOptions.value || {}),
 						spacing: newSpacing,
 					};
 				},

app/src/modules/activity/routes/browse.vue

@@ -20,11 +20,10 @@
 
 		<component
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType}`"
+			:is="`layout-${layout}`"
 			collection="directus_activity"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters="_filters"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
@@ -36,7 +35,7 @@
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_activity_browse'))" />
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 	</private-view>
@@ -46,7 +45,6 @@
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import ActivityNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
-import { LayoutComponent } from '@/layouts/types';
 import usePreset from '@/composables/use-preset';
 import marked from 'marked';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
@@ -72,9 +70,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const layout = ref<LayoutComponent | null>(null);
-
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_activity'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_activity'));
 		const { breadcrumb } = useBreadcrumb();
 
 		const _filters = computed(() => {
@@ -97,11 +93,10 @@ export default defineComponent({
 
 		return {
 			breadcrumb,
-			layout,
 			marked,
-			viewType,
-			viewOptions,
-			viewQuery,
+			layout,
+			layoutOptions,
+			layoutQuery,
 			filters,
 			searchQuery,
 			_filters,

app/src/modules/collections/components/navigation-bookmark.vue

@@ -1,7 +1,7 @@
 <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-content>{{ bookmark.bookmark }}</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>
@@ -42,7 +42,7 @@
 
 		<v-dialog v-model="deleteActive" persistent>
 			<v-card>
-				<v-card-title>{{ $t('delete_bookmark_copy', { bookmark: bookmark.title }) }}</v-card-title>
+				<v-card-title>{{ $t('delete_bookmark_copy', { bookmark: bookmark.bookmark }) }}</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">
@@ -91,7 +91,7 @@ export default defineComponent({
 
 		function useRenameBookmark() {
 			const renameActive = ref(false);
-			const renameValue = ref(props.bookmark.title);
+			const renameValue = ref(props.bookmark.bookmark);
 			const renameSaving = ref(false);
 
 			return { renameActive, renameValue, renameSave, renameSaving };
@@ -102,7 +102,7 @@ export default defineComponent({
 				try {
 					await presetsStore.savePreset({
 						...props.bookmark,
-						title: renameValue.value,
+						bookmark: renameValue.value,
 					});
 
 					renameActive.value = false;
@@ -116,7 +116,7 @@ export default defineComponent({
 
 		function useDeleteBookmark() {
 			const deleteActive = ref(false);
-			const deleteValue = ref(props.bookmark.title);
+			const deleteValue = ref(props.bookmark.bookmark);
 			const deleteSaving = ref(false);
 
 			return { deleteActive, deleteValue, deleteSave, deleteSaving };

app/src/modules/collections/components/navigation.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 			return orderBy(
 				presetsStore.state.collectionPresets
 					.filter((preset) => {
-						return preset.title !== null && preset.collection.startsWith('directus_') === false;
+						return preset.bookmark !== null && preset.collection.startsWith('directus_') === false;
 					})
 					.map((preset) => {
 						let scope = 'global';
@@ -71,7 +71,7 @@ export default defineComponent({
 							scope,
 						};
 					}),
-				['title'],
+				['bookmark'],
 				['asc']
 			);
 		});

app/src/modules/collections/routes/browse.vue

@@ -1,6 +1,6 @@
 <template>
 	<collections-not-found v-if="!currentCollection || collection.startsWith('directus_')" />
-	<private-view v-else :title="bookmark ? bookmarkName : currentCollection.name">
+	<private-view v-else :title="bookmark ? bookmarkTitle : currentCollection.name">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon secondary disabled>
 				<v-icon :name="currentCollection.icon" />
@@ -29,7 +29,12 @@
 				<v-icon class="saved" name="bookmark" v-else-if="bookmarkSaved" />
 
 				<template v-else-if="bookmarkIsMine">
-					<v-icon class="save" @click="savePreset()" name="bookmark_save" v-tooltip.bottom="$t('update_bookmark')" />
+					<v-icon
+						class="save"
+						@click="savePreset()"
+						name="bookmark_save"
+						v-tooltip.bottom="$t('update_bookmark')"
+					/>
 				</template>
 
 				<bookmark-add
@@ -166,12 +171,12 @@
 		<component
 			v-else
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType || 'tabular'}`"
+			ref="layoutRef"
+			:is="`layout-${layout || 'tabular'}`"
 			:collection="collection"
 			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters.sync="filters"
 			:search-query.sync="searchQuery"
 			:reset-preset="resetPreset"
@@ -210,7 +215,7 @@
 					"
 				/>
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 
@@ -271,7 +276,7 @@ export default defineComponent({
 	setup(props) {
 		const userStore = useUserStore();
 		const permissionsStore = usePermissionsStore();
-		const layout = ref<LayoutComponent | null>(null);
+		const layoutRef = ref<LayoutComponent | null>(null);
 
 		const { collection } = toRefs(props);
 		const bookmarkID = computed(() => (props.bookmark ? +props.bookmark : null));
@@ -282,15 +287,15 @@ export default defineComponent({
 		const { breadcrumb } = useBreadcrumb();
 
 		const {
-			viewType,
-			viewOptions,
-			viewQuery,
+			layout,
+			layoutOptions,
+			layoutQuery,
 			filters,
 			searchQuery,
 			savePreset,
 			bookmarkExists,
 			saveCurrentAsBookmark,
-			title: bookmarkName,
+			bookmarkTitle,
 			resetPreset,
 			bookmarkSaved,
 			bookmarkIsMine,
@@ -319,8 +324,8 @@ export default defineComponent({
 		watch(
 			collection,
 			() => {
-				if (viewType.value === null) {
-					viewType.value = 'tabular';
+				if (layout.value === null) {
+					layout.value = 'tabular';
 				}
 			},
 			{ immediate: true }
@@ -337,11 +342,11 @@ export default defineComponent({
 			currentCollection,
 			deleting,
 			filters,
-			layout,
+			layoutRef,
 			selection,
-			viewOptions,
-			viewQuery,
-			viewType,
+			layoutOptions,
+			layoutQuery,
+			layout,
 			searchQuery,
 			savePreset,
 			bookmarkExists,
@@ -349,7 +354,7 @@ export default defineComponent({
 			bookmarkDialogActive,
 			creatingBookmark,
 			createBookmark,
-			bookmarkName,
+			bookmarkTitle,
 			editingBookmark,
 			editBookmark,
 			breadcrumb,
@@ -411,7 +416,7 @@ export default defineComponent({
 
 				try {
 					await api.delete(`/items/${props.collection}/${batchPrimaryKeys}`);
-					await layout.value?.refresh?.();
+					await layoutRef.value?.refresh?.();
 
 					selection.value = [];
 					confirmDelete.value = false;
@@ -431,7 +436,7 @@ export default defineComponent({
 
 				try {
 					await api.patch(`/items/${props.collection}/${batchPrimaryKeys}`);
-					await layout.value?.refresh?.();
+					await layoutRef.value?.refresh?.();
 
 					selection.value = [];
 					confirmArchive.value = false;
@@ -477,7 +482,7 @@ export default defineComponent({
 				creatingBookmark.value = true;
 
 				try {
-					const newBookmark = await saveCurrentAsBookmark({ title: name });
+					const newBookmark = await saveCurrentAsBookmark({ bookmark: name });
 					router.push(`/collections/${newBookmark.collection}?bookmark=${newBookmark.id}`);
 
 					bookmarkDialogActive.value = false;
@@ -489,7 +494,7 @@ export default defineComponent({
 			}
 
 			async function editBookmark(name: string) {
-				bookmarkName.value = name;
+				bookmarkTitle.value = name;
 				bookmarkDialogActive.value = false;
 			}
 		}
@@ -599,8 +604,11 @@ export default defineComponent({
 	.save,
 	.clear {
 		cursor: pointer;
-		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
+	}
+
+	.add {
+		color: var(--foreground-subdued);
 
 		&:hover {
 			color: var(--foreground-normal);
@@ -615,17 +623,17 @@ export default defineComponent({
 		}
 	}
 
-	.saved {
-		color: var(--primary);
-	}
-
 	.clear {
-		color: var(--foreground-subdued);
 		margin-left: 4px;
+		color: var(--foreground-subdued);
 
 		&:hover {
 			color: var(--warning);
 		}
 	}
+
+	.saved {
+		color: var(--primary);
+	}
 }
 </style>

app/src/modules/collections/routes/detail.vue

@@ -33,7 +33,7 @@
 				secondary
 				exact
 				v-tooltip.bottom="$t('back')"
-				:to="backLink"
+				@click="$router.go(-1)"
 			>
 				<v-icon name="arrow_back" />
 			</v-button>
@@ -257,8 +257,6 @@ export default defineComponent({
 		const confirmLeave = ref(false);
 		const leaveTo = ref<string | null>(null);
 
-		const backLink = computed(() => `/collections/${collection.value}/`);
-
 		const templateValues = computed(() => {
 			return {
 				...(item.value || {}),
@@ -303,7 +301,6 @@ export default defineComponent({
 		return {
 			item,
 			loading,
-			backLink,
 			error,
 			isNew,
 			edits,
@@ -375,7 +372,12 @@ export default defineComponent({
 			if (saveAllowed.value === false || hasEdits.value === false) return;
 
 			await save();
-			router.push(`/collections/${props.collection}/+`);
+
+			if (isNew.value === true) {
+				refresh();
+			} else {
+				router.push(`/collections/${props.collection}/+`);
+			}
 		}
 
 		async function saveAsCopyAndNavigate() {

app/src/modules/files/routes/browse.vue

@@ -93,12 +93,12 @@
 
 		<component
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType}`"
+			ref="layoutRef"
+			:is="`layout-${layout}`"
 			collection="directus_files"
 			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters="filtersWithFolderAndType"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
@@ -130,7 +130,7 @@
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_files_browse'))" />
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 	</private-view>
@@ -175,12 +175,12 @@ export default defineComponent({
 	},
 	setup(props) {
 		const { folders } = useFolders();
-		const layout = ref<LayoutComponent | null>(null);
+		const layoutRef = ref<LayoutComponent | null>(null);
 		const selection = ref<Item[]>([]);
 
 		const userStore = useUserStore();
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_files'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_files'));
 		const { batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb, title } = useBreadcrumb();
@@ -250,11 +250,11 @@ export default defineComponent({
 			confirmDelete,
 			deleting,
 			filters,
-			layout,
+			layoutRef,
 			selection,
-			viewOptions,
-			viewQuery,
-			viewType,
+			layoutOptions,
+			layoutQuery,
+			layout,
 			filtersWithFolderAndType,
 			searchQuery,
 			marked,
@@ -281,7 +281,7 @@ export default defineComponent({
 
 				await api.delete(`/files/${batchPrimaryKeys}`);
 
-				await layout.value?.refresh();
+				await layoutRef.value?.refresh();
 
 				selection.value = [];
 				deleting.value = false;
@@ -371,7 +371,7 @@ export default defineComponent({
 		}
 
 		function refresh() {
-			layout.value?.refresh();
+			layoutRef.value?.refresh();
 		}
 
 		function clearFilters() {

app/src/modules/files/routes/detail.vue

@@ -2,7 +2,7 @@
 	<files-not-found v-if="!loading && !item" />
 	<private-view v-else :title="loading || !item ? $t('loading') : item.title">
 		<template #title-outer:prepend>
-			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon secondary exact @click="$router.go(-1)">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -72,13 +72,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				@click="downloadFile"
-				class="download"
-				v-tooltip.bottom="$t('download')"
-			>
+			<v-button rounded icon @click="downloadFile" class="download" v-tooltip.bottom="$t('download')">
 				<v-icon name="save_alt" />
 			</v-button>
 
@@ -391,7 +385,7 @@ export default defineComponent({
 
 		function downloadFile() {
 			const filePath = getRootPath() + `assets/${props.primaryKey}`;
-			window.open(filePath, "_blank");
+			window.open(filePath, '_blank');
 		}
 
 		function useMovetoFolder() {

app/src/modules/settings/routes/data-model/field-detail/components/display.vue

@@ -11,7 +11,7 @@
 		</v-notice>
 
 		<template v-if="fieldData.meta.display && selectedDisplay">
-			<v-notice v-if="!selectedDisplay.options">
+			<v-notice v-if="!selectedDisplay.options || selectedDisplay.options.length === 0">
 				{{ $t('no_options_available') }}
 			</v-notice>
 
@@ -32,6 +32,7 @@ import { defineComponent, computed } from '@vue/composition-api';
 import { getDisplays } from '@/displays';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
+import { clone } from 'lodash';
 
 import { state, availableDisplays } from '../store';
 
@@ -51,7 +52,9 @@ export default defineComponent({
 		});
 
 		const selectItems = computed(() => {
-			const recommended = selectedInterface.value?.recommendedDisplays || [];
+			const recommended = clone(selectedInterface.value?.recommendedDisplays) || [];
+
+			recommended.push('raw', 'formatted-value');
 
 			const displayItems: FancySelectItem[] = availableDisplays.value.map((display) => {
 				const item: FancySelectItem = {
@@ -71,8 +74,8 @@ export default defineComponent({
 			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [];
 
 			const recommendedList = recommended.map((key) => displayItems.find((item) => item.value === key));
-			if (recommendedList !== undefined && recommendedList.includes(undefined) === false) {
-				recommendedItems.push(...recommendedList);
+			if (recommendedList !== undefined) {
+				recommendedItems.push(...recommendedList.filter((i) => i));
 			}
 
 			if (displayItems.length >= 5 && recommended.length > 0) {
@@ -81,7 +84,7 @@ export default defineComponent({
 
 			const displayList = displayItems.filter((item) => recommended.includes(item.value as string) === false);
 			if (displayList !== undefined) {
-				recommendedItems.push(...displayList);
+				recommendedItems.push(...displayList.filter((i) => i));
 			}
 
 			return recommendedItems;
@@ -101,4 +104,14 @@ export default defineComponent({
 .select {
 	margin-bottom: 32px;
 }
+
+.not-found {
+	.spacer {
+		flex-grow: 1;
+	}
+
+	button {
+		text-decoration: underline;
+	}
+}
 </style>

app/src/modules/settings/routes/data-model/field-detail/components/interface.vue

@@ -11,7 +11,7 @@
 		</v-notice>
 
 		<template v-if="fieldData.meta.interface && selectedInterface">
-			<v-notice v-if="!selectedInterface.options">
+			<v-notice v-if="!selectedInterface.options || selectedInterface.options.length === 0">
 				{{ $t('no_options_available') }}
 			</v-notice>
 
@@ -88,8 +88,8 @@ export default defineComponent({
 			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [];
 
 			const recommendedList = recommended.map((key) => interfaceItems.find((item) => item.value === key));
-			if (recommendedList !== undefined && recommendedList.includes(undefined) === false) {
-				recommendedItems.push(...recommendedList);
+			if (recommendedList !== undefined) {
+				recommendedItems.push(...recommendedList.filter((i) => i));
 			}
 
 			if (interfaceItems.length >= 5 && recommended.length > 0) {
@@ -98,7 +98,7 @@ export default defineComponent({
 
 			const interfaceList = interfaceItems.filter((item) => recommended.includes(item.value as string) === false);
 			if (interfaceList !== undefined) {
-				recommendedItems.push(...interfaceList);
+				recommendedItems.push(...interfaceList.filter((i) => i));
 			}
 
 			return recommendedItems;

app/src/modules/settings/routes/data-model/field-detail/field-detail.vue

@@ -4,7 +4,7 @@
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
-				: $t('updating_field_field', { field: existingField.name })
+				: $t('updating_field_field', { field: existingField.name, collection: collectionInfo.name })
 		"
 		:subtitle="localType ? $t(`field_${localType}`) : null"
 		persistent

app/src/modules/settings/routes/data-model/fields/components/field-select.vue

@@ -69,26 +69,17 @@
 
 				<v-divider />
 
-				<v-list-item
-					@click="setWidth('half')"
-					:disabled="hidden || (field.meta && field.meta.width === 'half')"
-				>
+				<v-list-item @click="setWidth('half')" :disabled="field.meta && field.meta.width === 'half'">
 					<v-list-item-icon><v-icon name="border_vertical" /></v-list-item-icon>
 					<v-list-item-content>{{ $t('half_width') }}</v-list-item-content>
 				</v-list-item>
 
-				<v-list-item
-					@click="setWidth('full')"
-					:disabled="hidden || (field.meta && field.meta.width === 'full')"
-				>
+				<v-list-item @click="setWidth('full')" :disabled="field.meta && field.meta.width === 'full'">
 					<v-list-item-icon><v-icon name="border_right" /></v-list-item-icon>
 					<v-list-item-content>{{ $t('full_width') }}</v-list-item-content>
 				</v-list-item>
 
-				<v-list-item
-					@click="setWidth('fill')"
-					:disabled="hidden || (field.meta && field.meta.width === 'fill')"
-				>
+				<v-list-item @click="setWidth('fill')" :disabled="field.meta && field.meta.width === 'fill'">
 					<v-list-item-icon><v-icon name="aspect_ratio" /></v-list-item-icon>
 					<v-list-item-content>{{ $t('fill_width') }}</v-list-item-content>
 				</v-list-item>

app/src/modules/settings/routes/data-model/new-collection.vue

@@ -310,7 +310,7 @@ export default defineComponent({
 					field: systemFields.sort.name,
 					type: 'integer',
 					meta: {
-						interface: 'sort',
+						interface: 'numeric',
 						hidden: true,
 					},
 					schema: {},

app/src/modules/settings/routes/presets/browse/browse.vue

@@ -110,7 +110,7 @@ type PresetRaw = {
 	user: null | { first_name: string; last_name: string };
 	role: null | { name: string };
 	collection: string;
-	view_type: string;
+	layout: string;
 };
 
 type Preset = {
@@ -176,7 +176,7 @@ export default defineComponent({
 					}
 
 					const collection = collectionsStore.getCollection(preset.collection)?.name;
-					const layout = layouts.find((l) => l.id === preset.view_type)?.name;
+					const layout = layouts.find((l) => l.id === preset.layout)?.name;
 
 					return {
 						id: preset.id,
@@ -203,7 +203,7 @@ export default defineComponent({
 								'user.last_name',
 								'role.name',
 								'collection',
-								'view_type',
+								'layout',
 							],
 							limit: -1,
 						},

app/src/modules/settings/routes/presets/detail.vue

@@ -66,8 +66,8 @@
 					v-if="values.layout && values.collection"
 					:is="`layout-${values.layout}`"
 					:collection="values.collection"
-					:view-options.sync="viewOptions"
-					:view-query.sync="viewQuery"
+					:layout-options.sync="layoutOptions"
+					:layout-query.sync="layoutQuery"
 					:filters="values.filters || []"
 					@update:filters="edits.filters = $event"
 					readonly
@@ -116,9 +116,9 @@ type FormattedPreset = {
 	layout: string | null;
 	name: string | null;
 
-	view_query: Record<string, any> | null;
+	layout_query: Record<string, any> | null;
 
-	view_options: Record<string, any> | null;
+	layout_options: Record<string, any> | null;
 	filters: readonly Filter[] | null;
 };
 
@@ -141,7 +141,7 @@ export default defineComponent({
 		const { loading: rolesLoading, roles } = useRoles();
 		const { loading: presetLoading, error, preset } = usePreset();
 		const { fields } = useForm();
-		const { edits, hasEdits, initialValues, values, viewQuery, viewOptions } = useValues();
+		const { edits, hasEdits, initialValues, values, layoutQuery, layoutOptions } = useValues();
 		const { save, saving } = useSave();
 		const { deleting, deleteAndQuit, confirmDelete } = useDelete();
 
@@ -158,8 +158,8 @@ export default defineComponent({
 			initialValues,
 			saving,
 			save,
-			viewQuery,
-			viewOptions,
+			layoutQuery,
+			layoutOptions,
 			hasEdits,
 			deleting,
 			deleteAndQuit,
@@ -177,12 +177,12 @@ export default defineComponent({
 
 				const editsParsed: Partial<Preset> = {};
 
-				if (edits.value.name) editsParsed.title = edits.value.name;
-				if (edits.value.name?.length === 0) editsParsed.title = null;
+				if (edits.value.name) editsParsed.bookmark = edits.value.name;
+				if (edits.value.name?.length === 0) editsParsed.bookmark = null;
 				if (edits.value.collection) editsParsed.collection = edits.value.collection;
-				if (edits.value.layout) editsParsed.view_type = edits.value.layout;
-				if (edits.value.view_query) editsParsed.view_query = edits.value.view_query;
-				if (edits.value.view_options) editsParsed.view_options = edits.value.view_options;
+				if (edits.value.layout) editsParsed.layout = edits.value.layout;
+				if (edits.value.layout_query) editsParsed.layout_query = edits.value.layout_query;
+				if (edits.value.layout_options) editsParsed.layout_options = edits.value.layout_options;
 				if (edits.value.filters) editsParsed.filters = edits.value.filters;
 
 				if (edits.value.scope) {
@@ -253,11 +253,11 @@ export default defineComponent({
 					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 					id: preset.value.id!,
 					collection: preset.value.collection,
-					layout: preset.value.view_type,
-					name: preset.value.title,
+					layout: preset.value.layout,
+					name: preset.value.bookmark,
 					scope: scope,
-					view_query: preset.value.view_query,
-					view_options: preset.value.view_options,
+					layout_query: preset.value.layout_query,
+					layout_options: preset.value.layout_options,
 					filters: preset.value.filters,
 				};
 
@@ -271,43 +271,43 @@ export default defineComponent({
 				};
 			});
 
-			const viewQuery = computed({
+			const layoutQuery = computed({
 				get() {
-					if (!values.value.view_query) return null;
+					if (!values.value.layout_query) return null;
 					if (!values.value.layout) return null;
 
-					return values.value.view_query[values.value.layout];
+					return values.value.layout_query[values.value.layout];
 				},
 				set(newQuery) {
 					edits.value = {
 						...edits.value,
-						view_query: {
-							...edits.value.view_query,
+						layout_query: {
+							...edits.value.layout_query,
 							[values.value.layout]: newQuery,
 						},
 					};
 				},
 			});
 
-			const viewOptions = computed({
+			const layoutOptions = computed({
 				get() {
-					if (!values.value.view_options) return null;
+					if (!values.value.layout_options) return null;
 					if (!values.value.layout) return null;
 
-					return values.value.view_options[values.value.layout];
+					return values.value.layout_options[values.value.layout];
 				},
 				set(newOptions) {
 					edits.value = {
 						...edits.value,
-						view_options: {
-							...edits.value.view_options,
+						layout_options: {
+							...edits.value.layout_options,
 							[values.value.layout]: newOptions,
 						},
 					};
 				},
 			});
 
-			return { edits, initialValues, values, viewQuery, viewOptions, hasEdits };
+			return { edits, initialValues, values, layoutQuery, layoutOptions, hasEdits };
 		}
 
 		function usePreset() {

app/src/modules/settings/routes/webhooks/browse.vue

@@ -12,51 +12,8 @@
 			<settings-navigation />
 		</template>
 
-		<!--
-		<template #actions>
-			<v-dialog v-model="confirmDelete">
-				<template #activator="{ on }">
-					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
-						<v-icon name="delete" outline />
-					</v-button>
-				</template>
-
-				<v-card>
-					<v-card-title>{{ $tc('batch_delete_confirm', selection.length) }}</v-card-title>
-
-					<v-card-actions>
-						<v-button @click="confirmDelete = false" secondary>
-							{{ $t('cancel') }}
-						</v-button>
-						<v-button @click="batchDelete" class="action-delete" :loading="deleting">
-							{{ $t('delete') }}
-						</v-button>
-					</v-card-actions>
-				</v-card>
-			</v-dialog>
-
-			<v-button rounded icon class="action-batch" v-if="selection.length > 1" :to="batchLink">
-				<v-icon name="edit" outline />
-			</v-button>
-
-			<v-button rounded icon :to="addNewLink">
-				<v-icon name="add" />
-			</v-button>
-		</template>
-
-		<layout-tabular
-			class="layout"
-			ref="layout"
-			collection="directus_webhooks"
-			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
-		/> -->
-
 		<div class="content">
-			<v-notice>
-				Pre-Release: Feature not yet available
-			</v-notice>
+			<v-notice>Pre-Release: Feature not yet available</v-notice>
 		</div>
 
 		<template #drawer>
@@ -70,14 +27,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
 
-import { i18n } from '@/lang';
-import api from '@/api';
-import { LayoutComponent } from '@/layouts/types';
-import usePreset from '@/composables/use-preset';
-import marked from 'marked';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 
 type Item = {
@@ -87,123 +39,10 @@ type Item = {
 export default defineComponent({
 	name: 'webhooks-browse',
 	components: { SettingsNavigation, LayoutDrawerDetail },
-	props: {},
-	setup() {
-		const layout = ref<LayoutComponent | null>(null);
-
-		const selection = ref<Item[]>([]);
-
-		const { viewType, viewOptions, viewQuery } = usePreset(ref('directus_webhooks'));
-		const { addNewLink, batchLink } = useLinks();
-		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
-		const { breadcrumb } = useBreadcrumb();
-
-		if (viewType.value === null) {
-			viewType.value = 'tabular';
-		}
-
-		if (viewOptions.value === null && viewType.value === 'tabular') {
-			viewOptions.value = {
-				widths: {
-					status: 50,
-					name: 120,
-					directus_action: 180,
-					collection: 220,
-				},
-			};
-		}
-
-		if (viewQuery.value === null && viewType.value === 'tabular') {
-			viewQuery.value = {
-				fields: ['status', 'name', 'directus_action', 'collection'],
-			};
-		}
-
-		return {
-			addNewLink,
-			batchLink,
-			selection,
-			breadcrumb,
-			confirmDelete,
-			batchDelete,
-			deleting,
-			layout,
-			viewOptions,
-			viewQuery,
-			marked,
-		};
-
-		function useBatchDelete() {
-			const confirmDelete = ref(false);
-			const deleting = ref(false);
-
-			return { confirmDelete, deleting, batchDelete };
-
-			async function batchDelete() {
-				deleting.value = true;
-
-				confirmDelete.value = false;
-
-				const batchPrimaryKeys = selection.value.map((item) => item.id).join();
-
-				await api.delete(`/settings/webhooks/${batchPrimaryKeys}`);
-
-				await layout.value?.refresh();
-
-				selection.value = [];
-				deleting.value = false;
-				confirmDelete.value = false;
-			}
-		}
-
-		function useLinks() {
-			const addNewLink = computed<string>(() => {
-				return `/settings/webhooks/+`;
-			});
-
-			const batchLink = computed<string>(() => {
-				const batchPrimaryKeys = selection.value.map((item) => item.id).join();
-				return `/settings/webhooks/${batchPrimaryKeys}`;
-			});
-
-			return { addNewLink, batchLink };
-		}
-
-		function useBreadcrumb() {
-			const breadcrumb = computed(() => {
-				return [
-					{
-						name: i18n.tc('collection', 2),
-						to: `/collections`,
-					},
-				];
-			});
-
-			return { breadcrumb };
-		}
-	},
 });
 </script>
 
 <style lang="scss" scoped>
-// .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);
-// }
-
-// .action-batch {
-// 	--v-button-background-color: var(--warning-25);
-// 	--v-button-color: var(--warning);
-// 	--v-button-background-color-hover: var(--warning-50);
-// 	--v-button-color-hover: var(--warning);
-// }
-
-// .layout {
-// 	--layout-offset-top: 64px;
-// }
-
 .header-icon {
 	--v-button-color-disabled: var(--warning);
 	--v-button-background-color-disabled: var(--warning-25);

app/src/modules/users/routes/browse.vue

@@ -60,12 +60,12 @@
 
 		<component
 			class="layout"
-			ref="layout"
-			:is="`layout-${viewType}`"
+			ref="layoutRef"
+			:is="`layout-${layout}`"
 			collection="directus_users"
 			:selection.sync="selection"
-			:view-options.sync="viewOptions"
-			:view-query.sync="viewQuery"
+			:layout-options.sync="layoutOptions"
+			:layout-query.sync="layoutQuery"
 			:filters="_filters"
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
@@ -95,7 +95,7 @@
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_users_browse'))" />
 			</drawer-detail>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
 		</template>
 	</private-view>
@@ -129,11 +129,11 @@ export default defineComponent({
 	},
 	setup(props) {
 		const { roles } = useNavigation();
-		const layout = ref<LayoutComponent | null>(null);
+		const layoutRef = ref<LayoutComponent | null>(null);
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = usePreset(ref('directus_users'));
+		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_users'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb, title } = useBreadcrumb();
@@ -167,11 +167,11 @@ export default defineComponent({
 			confirmDelete,
 			deleting,
 			filters,
-			layout,
+			layoutRef,
 			selection,
-			viewOptions,
-			viewQuery,
-			viewType,
+			layoutOptions,
+			layoutQuery,
+			layout,
 			searchQuery,
 			marked,
 			clearFilters,
@@ -192,7 +192,7 @@ export default defineComponent({
 
 				await api.delete(`/users/${batchPrimaryKeys}`);
 
-				await layout.value?.refresh();
+				await layoutRef.value?.refresh();
 
 				selection.value = [];
 				deleting.value = false;

app/src/modules/users/routes/detail.vue

@@ -1,7 +1,7 @@
 <template>
 	<private-view :title="title">
 		<template #title-outer:prepend>
-			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon secondary exact @click="$router.go(-1)">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>

app/src/stores/fields.ts

@@ -8,6 +8,7 @@ import notify from '@/utils/notify';
 import { useRelationsStore } from '@/stores/';
 import { Relation, FieldRaw, Field } from '@/types';
 import { merge } from 'lodash';
+import { nanoid } from 'nanoid';
 
 const fakeFilesField: Field = {
 	collection: 'directus_files',
@@ -36,6 +37,15 @@ const fakeFilesField: Field = {
 	},
 };
 
+/**
+ * @NOTE
+ * This keeps track of what update is the last one that's in progress. After every update, the store
+ * gets flushed with the updated values, which means that you can have racing conditions if you do
+ * multiple updates at the same time. By keeping track which one is the last one that's fired, we
+ * can ensure that only the last update gets used to flush the store with.
+ */
+let currentUpdate: string;
+
 export const useFieldsStore = createStore({
 	id: 'fieldsStore',
 	state: () => ({
@@ -165,8 +175,11 @@ export const useFieldsStore = createStore({
 			}
 		},
 		async updateFields(collectionKey: string, updates: Partial<Field>[]) {
+			const updateID = nanoid();
 			const stateClone = [...this.state.fields];
 
+			currentUpdate = updateID;
+
 			// Update locally first, so the changes are visible immediately
 			this.state.fields = this.state.fields.map((field) => {
 				if (field.collection === collectionKey) {
@@ -185,16 +198,18 @@ export const useFieldsStore = createStore({
 				// API
 				const response = await api.patch(`/fields/${collectionKey}`, updates);
 
-				this.state.fields = this.state.fields.map((field) => {
-					if (field.collection === collectionKey) {
-						const newDataForField = response.data.data.find(
-							(update: Field) => update.field === field.field
-						);
-						if (newDataForField) return this.parseField(newDataForField);
-					}
+				if (currentUpdate === updateID) {
+					this.state.fields = this.state.fields.map((field) => {
+						if (field.collection === collectionKey) {
+							const newDataForField = response.data.data.find(
+								(update: Field) => update.field === field.field
+							);
+							if (newDataForField) return this.parseField(newDataForField);
+						}
 
-					return field;
-				});
+						return field;
+					});
+				}
 
 				notify({
 					title: i18n.t('fields_update_success'),