Merge pull request #650 from directus/item-browse

Rename browse/detail to collection/item

api/src/types/field.ts

@@ -28,8 +28,7 @@ export type FieldMeta = {
 	locked: boolean;
 	required: boolean;
 	readonly: boolean;
-	hidden_detail: boolean;
-	hidden_browse: boolean;
+	hidden: boolean;
 	sort: number | null;
 	width: string | null;
 	group: number | null;

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

@@ -52,7 +52,7 @@
 					</v-list>
 				</v-menu>
 
-				<modal-browse
+				<modal-collection
 					collection="directus_files"
 					:active="activeDialog === 'choose'"
 					@update:active="activeDialog = null"
@@ -83,12 +83,12 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import uploadFiles from '@/utils/upload-files';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalCollection from '@/views/private/components/modal-collection';
 import api from '@/api';
 import useItem from '@/composables/use-item';
 
 export default defineComponent({
-	components: { ModalBrowse },
+	components: { ModalCollection },
 	props: {
 		multiple: {
 			type: Boolean,

app/src/interfaces/file/file.vue

@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<modal-browse
+		<modal-collection
 			collection="directus_files"
 			:active="activeDialog === 'choose'"
 			@update:active="activeDialog = null"
@@ -107,7 +107,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, computed } from '@vue/composition-api';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalCollection from '@/views/private/components/modal-collection';
 import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
 import getRootPath from '@/utils/get-root-path';
@@ -119,7 +119,7 @@ type FileInfo = {
 };
 
 export default defineComponent({
-	components: { ModalBrowse },
+	components: { ModalCollection },
 	props: {
 		value: {
 			type: String,

app/src/interfaces/files/files.vue

@@ -29,12 +29,12 @@
 
 		<div class="actions" v-if="!disabled">
 			<v-button class="new" @click="showUpload = true">{{ $t('upload_file') }}</v-button>
-			<v-button class="existing" @click="showBrowseModal = true">
+			<v-button class="existing" @click="showCollectionModal = true">
 				{{ $t('add_existing') }}
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item
 			v-if="!disabled"
 			:active="showDetailModal"
 			:collection="junctionCollection"
@@ -46,9 +46,9 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection
 			v-if="!disabled"
-			:active.sync="showBrowseModal"
+			:active.sync="showCollectionModal"
 			:collection="relationJunctionToRelated.one_collection"
 			:selection="[]"
 			:filters="selectionFilters"
@@ -71,8 +71,8 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRefs } from '@vue/composition-api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalBrowse from '@/views/private/components/modal-browse';
-import ModalDetail from '@/views/private/components/modal-detail';
+import ModalCollection from '@/views/private/components/modal-collection';
+import ModalItem from '@/views/private/components/modal-item';
 import { get } from 'lodash';
 import i18n from '@/lang';
 
@@ -82,7 +82,7 @@ import usePreview from '@/interfaces/many-to-many/use-preview';
 import useEdit from '@/interfaces/many-to-many/use-edit';
 
 export default defineComponent({
-	components: { ModalBrowse, ModalDetail },
+	components: { ModalCollection, ModalItem },
 	props: {
 		primaryKey: {
 			type: [Number, String],
@@ -174,7 +174,7 @@ export default defineComponent({
 			onEdit: (newValue) => emit('input', newValue),
 		});
 
-		const { showBrowseModal, stageSelection, selectionFilters } = useSelection({
+		const { showCollectionModal, stageSelection, selectionFilters } = useSelection({
 			relationCurrentToJunction,
 			relatedCollectionPrimaryKeyField,
 			previewItems,
@@ -203,7 +203,7 @@ export default defineComponent({
 			junctionRowPrimaryKey,
 			editExisting,
 			relatedRowPrimaryKey,
-			showBrowseModal,
+			showCollectionModal,
 			stageSelection,
 			selectionFilters,
 			relatedCollection,

app/src/interfaces/many-to-many/many-to-many.vue

@@ -34,12 +34,12 @@
 
 		<div class="actions" v-if="!disabled">
 			<v-button class="new" @click="addNew">{{ $t('create_new') }}</v-button>
-			<v-button class="existing" @click="showBrowseModal = true">
+			<v-button class="existing" @click="showCollectionModal = true">
 				{{ $t('add_existing') }}
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item
 			v-if="!disabled"
 			:active.sync="showDetailModal"
 			:collection="junctionCollection"
@@ -51,9 +51,9 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection
 			v-if="!disabled"
-			:active.sync="showBrowseModal"
+			:active.sync="showCollectionModal"
 			:collection="relationJunctionToRelated.one_collection"
 			:selection="[]"
 			:filters="selectionFilters"
@@ -67,8 +67,8 @@
 import { defineComponent, ref, watch, PropType, toRefs, computed } from '@vue/composition-api';
 import { useFieldsStore } from '@/stores/';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalBrowse from '@/views/private/components/modal-browse';
-import ModalDetail from '@/views/private/components/modal-detail';
+import ModalCollection from '@/views/private/components/modal-collection';
+import ModalItem from '@/views/private/components/modal-item';
 import { get } from 'lodash';
 
 import useRelation from './use-relation';
@@ -97,7 +97,7 @@ import { Field } from '@/types';
  */
 
 export default defineComponent({
-	components: { ModalBrowse, ModalDetail },
+	components: { ModalCollection, ModalItem },
 	props: {
 		primaryKey: {
 			type: [Number, String],
@@ -179,7 +179,7 @@ export default defineComponent({
 			onEdit: (newValue) => emit('input', newValue),
 		});
 
-		const { showBrowseModal, stageSelection, selectionFilters } = useSelection({
+		const { showCollectionModal, stageSelection, selectionFilters } = useSelection({
 			relationCurrentToJunction,
 			relatedCollectionPrimaryKeyField,
 			previewItems,
@@ -206,7 +206,7 @@ export default defineComponent({
 			junctionRowPrimaryKey,
 			editExisting,
 			relatedRowPrimaryKey,
-			showBrowseModal,
+			showCollectionModal,
 			stageSelection,
 			selectionFilters,
 			relatedCollection,

app/src/interfaces/many-to-many/use-selection.ts

@@ -15,7 +15,7 @@ export default function useSelection({
 	previewItems,
 	onStageSelection,
 }: SelectionParam) {
-	const showBrowseModal = ref(false);
+	const showCollectionModal = ref(false);
 
 	const alreadySelectedRelatedPrimaryKeys = computed(() => {
 		if (!relationCurrentToJunction.value) return [];
@@ -49,7 +49,7 @@ export default function useSelection({
 		return [filter];
 	});
 
-	return { showBrowseModal, stageSelection, selectionFilters };
+	return { showCollectionModal, stageSelection, selectionFilters };
 
 	function stageSelection(selection: any) {
 		const selectionAsJunctionRows = selection.map((relatedPrimaryKey: string | number) => {
@@ -70,7 +70,7 @@ export default function useSelection({
 			};
 		});
 
-		// Seeing the browse modal only shows items that haven't been selected yet (using the
+		// Seeing the collection modal only shows items that haven't been selected yet (using the
 		// filter above), we can safely assume that the items don't exist yet in props.value
 		onStageSelection(selectionAsJunctionRows);
 	}

app/src/interfaces/many-to-one/many-to-one.vue

@@ -82,7 +82,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-detail
+		<modal-item
 			v-if="!disabled"
 			:active.sync="editModalActive"
 			:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
 			@input="stageEdits"
 		/>
 
-		<modal-browse
+		<modal-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
 import useCollection from '@/composables/use-collection';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import api from '@/api';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalItem from '@/views/private/components/modal-item';
+import ModalCollection from '@/views/private/components/modal-collection';
 
 /**
  * @NOTE
@@ -119,7 +119,7 @@ import ModalBrowse from '@/views/private/components/modal-browse';
  */
 
 export default defineComponent({
-	components: { ModalDetail, ModalBrowse },
+	components: { ModalItem, ModalCollection },
 	props: {
 		value: {
 			type: [Number, String, Object],

app/src/interfaces/one-to-many/one-to-many.vue

@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-detail
+		<modal-item
 			v-if="!disabled"
 			:active="currentlyEditing !== null"
 			:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-browse
+		<modal-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -65,13 +65,13 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
 import api from '@/api';
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalItem from '@/views/private/components/modal-item';
+import ModalCollection from '@/views/private/components/modal-collection';
 import { Filter, Field } from '@/types';
 import { Header } from '@/components/v-table/types';
 
 export default defineComponent({
-	components: { ModalDetail, ModalBrowse },
+	components: { ModalItem, ModalCollection },
 	props: {
 		value: {
 			type: Array,

app/src/interfaces/user/user.vue

@@ -72,7 +72,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-detail
+		<modal-item
 			:active.sync="editModalActive"
 			collection="directus_users"
 			:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
 			v-if="!disabled"
 		/>
 
-		<modal-browse
+		<modal-collection
 			:active.sync="selectModalActive"
 			collection="directus_users"
 			:selection="selection"
@@ -95,11 +95,11 @@
 import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
 import useCollection from '@/composables/use-collection';
 import api from '@/api';
-import ModalDetail from '@/views/private/components/modal-detail';
-import ModalBrowse from '@/views/private/components/modal-browse';
+import ModalItem from '@/views/private/components/modal-item';
+import ModalCollection from '@/views/private/components/modal-collection';
 
 export default defineComponent({
-	components: { ModalDetail, ModalBrowse },
+	components: { ModalItem, ModalCollection },
 	props: {
 		value: {
 			type: String,
@@ -178,7 +178,7 @@ export default defineComponent({
 			const currentPrimaryKey = computed<string | number>(() => {
 				if (!currentUser.value) return '+';
 				if (!props.value) return '+';
-				
+
 				return props.value;
 			});
 

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

@@ -920,24 +920,24 @@
 	"keep_editing": "Keep Editing",
 
 	"page_help_collections_overview": "**Collections Overview** — Lists of all collections you have access to.",
-	"page_help_collections_browse": "**Browse Items** — Lists all {collection} items you have access to. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
-	"page_help_collections_detail": "**Item Detail** — A form for viewing and managing this item. This sidebar also contains a full history of revisions, and embedded comments.",
-	"page_help_activity_browse": "**Browse Activity** — A comprehensive listing of all your user's system and content activity.",
+	"page_help_collections_collection": "**Browse Items** — Lists all {collection} items you have access to. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
+	"page_help_collections_item": "**Item Detail** — A form for viewing and managing this item. This sidebar also contains a full history of revisions, and embedded comments.",
+	"page_help_activity_collection": "**Browse Activity** — A comprehensive listing of all your user's system and content activity.",
 	"page_help_activity_detail": "**Activity Detail** — Shows accountability info, revision data, and the update message for this activity record.",
 	"page_help_docs_global": "**Documentation Overview** — Docs tailored specifically to this project's version and schema.",
-	"page_help_files_browse": "**File Library** — Lists all file assets uploaded to this project. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
-	"page_help_files_detail": "**File Detail** — A form for managing file metadata, editing the original asset, and updating access settings.",
+	"page_help_files_collection": "**File Library** — Lists all file assets uploaded to this project. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
+	"page_help_files_item": "**File Detail** — A form for managing file metadata, editing the original asset, and updating access settings.",
 	"page_help_settings_project": "**Project Settings** — Your project's global configuration options.",
 	"page_help_settings_datamodel_collections": "**Data Model: Collections** — Lists all collections available. This includes visible, hidden, and system collections, as well as unmanaged database tables that can be added.",
 	"page_help_settings_datamodel_fields": "**Data Model: Collection** — A form for managing this collection and its fields.",
-	"page_help_settings_roles_browse": "**Browse Roles** — Lists the Admin, Public and custom User Roles.",
-	"page_help_settings_roles_detail": "**Role Detail** — Manage a role's permissions and other settings.",
-	"page_help_settings_presets_browse": "**Browse Presets** — Lists all presets in the project, including: user, role, and global bookmarks, as well as default views.",
-	"page_help_settings_presets_detail": "**Preset Detail** — A form for managing bookmarks and default collection presets.",
-	"page_help_settings_webhooks_browse": "**Browse Webhooks** — Lists all webhooks within the project.",
-	"page_help_settings_webhooks_detail": "**Webhook Detail** — A form for creating and managing project webhooks.",
-	"page_help_users_browse": "**User Directory** — Lists all system users within this project.",
-	"page_help_users_detail": "**User Detail** — Manage your account information, or view the details of other users.",
+	"page_help_settings_roles_collection": "**Browse Roles** — Lists the Admin, Public and custom User Roles.",
+	"page_help_settings_roles_item": "**Role Detail** — Manage a role's permissions and other settings.",
+	"page_help_settings_presets_collection": "**Browse Presets** — Lists all presets in the project, including: user, role, and global bookmarks, as well as default views.",
+	"page_help_settings_presets_item": "**Preset Detail** — A form for managing bookmarks and default collection presets.",
+	"page_help_settings_webhooks_collection": "**Browse Webhooks** — Lists all webhooks within the project.",
+	"page_help_settings_webhooks_item": "**Webhook Detail** — A form for creating and managing project webhooks.",
+	"page_help_users_collection": "**User Directory** — Lists all system users within this project.",
+	"page_help_users_item": "**User Detail** — Manage your account information, or view the details of other users.",
 
   "about_directus": "About Directus",
   "activity_feed": "Activity Feed",

app/src/modules/activity/index.ts

@@ -1,6 +1,6 @@
 import { defineModule } from '@/modules/define';
-import ActivityBrowse from './routes/browse.vue';
-import ActivityDetail from './routes/detail.vue';
+import ActivityCollection from './routes/collection.vue';
+import ActivityItem from './routes/item.vue';
 
 export default defineModule(({ i18n }) => ({
 	id: 'activity',
@@ -9,19 +9,19 @@ export default defineModule(({ i18n }) => ({
 	icon: 'notifications',
 	routes: [
 		{
-			name: 'activity-browse',
+			name: 'activity-collection',
 			path: '/',
-			component: ActivityBrowse,
+			component: ActivityCollection,
 			props: (route) => ({
 				queryFilters: route.query,
 				primaryKey: route.params.primaryKey,
 			}),
 			children: [
 				{
-					name: 'activity-detail',
+					name: 'activity-item',
 					path: ':primaryKey',
 					components: {
-						detail: ActivityDetail,
+						detail: ActivityItem,
 					},
 				},
 			],

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

@@ -33,7 +33,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_activity_browse'))" />
+				<div class="page-description" v-html="marked($t('page_help_activity_collection'))" />
 			</drawer-detail>
 			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
@@ -57,7 +57,7 @@ type Item = {
 };
 
 export default defineComponent({
-	name: 'activity-browse',
+	name: 'activity-collection',
 	components: { ActivityNavigation, FilterDrawerDetail, LayoutDrawerDetail, SearchInput },
 	props: {
 		primaryKey: {

app/src/modules/collections/index.ts

@@ -1,8 +1,8 @@
 import { defineModule } from '@/modules/define';
-import CollectionsOverview from './routes/overview.vue';
-import CollectionsBrowseOrDetail from './routes/browse-or-detail.vue';
-import CollectionsDetail from './routes/detail.vue';
-import CollectionsItemNotFound from './routes/not-found.vue';
+import Overview from './routes/overview.vue';
+import CollectionOrItem from './routes/collection-or-item.vue';
+import Item from './routes/item.vue';
+import ItemNotFound from './routes/not-found.vue';
 import { NavigationGuard } from 'vue-router';
 
 const checkForSystem: NavigationGuard = (to, from, next) => {
@@ -51,12 +51,12 @@ export default defineModule(({ i18n }) => ({
 		{
 			name: 'collections-overview',
 			path: '/',
-			component: CollectionsOverview,
+			component: Overview,
 		},
 		{
-			name: 'collections-browse',
+			name: 'collections-collection',
 			path: '/:collection',
-			component: CollectionsBrowseOrDetail,
+			component: CollectionOrItem,
 			props: (route) => ({
 				collection: route.params.collection,
 				bookmark: route.query.bookmark,
@@ -64,16 +64,16 @@ export default defineModule(({ i18n }) => ({
 			beforeEnter: checkForSystem,
 		},
 		{
-			name: 'collections-detail',
+			name: 'collections-item',
 			path: '/:collection/:primaryKey',
-			component: CollectionsDetail,
+			component: Item,
 			props: true,
 			beforeEnter: checkForSystem,
 		},
 		{
 			name: 'collections-item-not-found',
 			path: '/:collection/*',
-			component: CollectionsItemNotFound,
+			component: ItemNotFound,
 			beforeEnter: checkForSystem,
 		},
 	],

app/src/modules/collections/routes/collection-or-item.vue

@@ -2,7 +2,7 @@
 	<component
 		ref="component"
 		:bookmark="bookmark"
-		:is="isSingle ? 'collections-detail' : 'collections-browse'"
+		:is="isSingle ? 'item-route' : 'collection-route'"
 		:collection="collection"
 	/>
 </template>
@@ -10,14 +10,14 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import Vue from 'vue';
-import CollectionsBrowse from './browse.vue';
-import CollectionsDetail from './detail.vue';
+import CollectionRoute from './collection.vue';
+import ItemRoute from './item.vue';
 import { useCollectionsStore } from '@/stores/';
 
 export default defineComponent({
 	components: {
-		CollectionsBrowse,
-		CollectionsDetail,
+		CollectionRoute,
+		ItemRoute,
 	},
 	props: {
 		collection: {

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

@@ -208,7 +208,7 @@
 					class="page-description"
 					v-html="
 						marked(
-							$t('page_help_collections_browse', {
+							$t('page_help_collections_collection', {
 								collection: currentCollection.name,
 							})
 						)
@@ -260,7 +260,7 @@ type Item = {
 };
 
 export default defineComponent({
-	name: 'collections-browse',
+	name: 'collections-collection',
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,

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

@@ -172,7 +172,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_collections_detail'))" />
+				<div class="page-description" v-html="marked($t('page_help_collections_item'))" />
 			</drawer-detail>
 			<revisions-drawer-detail
 				v-if="

app/src/modules/files/components/file-info-drawer-detail.vue

@@ -103,7 +103,7 @@
 
 		<v-divider />
 
-		<div class="page-description" v-html="marked($t('page_help_files_detail'))" />
+		<div class="page-description" v-html="marked($t('page_help_files_item'))" />
 	</drawer-detail>
 </template>
 

app/src/modules/files/index.ts

@@ -1,7 +1,7 @@
 import { defineModule } from '@/modules/define';
-import FilesBrowse from './routes/browse.vue';
-import FilesDetail from './routes/detail.vue';
-import FilesAddNew from './routes/add-new.vue';
+import Collection from './routes/collection.vue';
+import Item from './routes/item.vue';
+import AddNew from './routes/add-new.vue';
 
 export default defineModule(({ i18n }) => ({
 	id: 'files',
@@ -9,9 +9,9 @@ export default defineModule(({ i18n }) => ({
 	icon: 'folder',
 	routes: [
 		{
-			name: 'files-browse',
+			name: 'files-collection',
 			path: '/',
-			component: FilesBrowse,
+			component: Collection,
 			props: (route) => ({
 				queryFilters: route.query,
 			}),
@@ -20,36 +20,36 @@ export default defineModule(({ i18n }) => ({
 					path: '+',
 					name: 'add-file',
 					components: {
-						addNew: FilesAddNew,
+						addNew: AddNew,
 					},
 				},
 			],
 		},
 		{
 			path: '/all',
-			component: FilesBrowse,
+			component: Collection,
 			props: () => ({
 				special: 'all',
 			}),
 		},
 		{
 			path: '/mine',
-			component: FilesBrowse,
+			component: Collection,
 			props: () => ({
 				special: 'mine',
 			}),
 		},
 		{
 			path: '/recent',
-			component: FilesBrowse,
+			component: Collection,
 			props: () => ({
 				special: 'recent',
 			}),
 		},
 		{
-			name: 'files-detail',
+			name: 'files-item',
 			path: '/:primaryKey',
-			component: FilesDetail,
+			component: Item,
 			props: true,
 		},
 	],

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

@@ -128,7 +128,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_files_browse'))" />
+				<div class="page-description" v-html="marked($t('page_help_files_collection'))" />
 			</drawer-detail>
 			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
@@ -161,7 +161,7 @@ type Item = {
 };
 
 export default defineComponent({
-	name: 'files-browse',
+	name: 'files-collection',
 	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput, FolderPicker },
 	props: {
 		queryFilters: {

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

@@ -111,7 +111,7 @@
 			<files-navigation :current-folder="item && item.folder" />
 		</template>
 
-		<div class="file-detail">
+		<div class="file-item">
 			<file-preview
 				v-if="isBatch === false && item"
 				:src="fileSrc"
@@ -200,7 +200,7 @@ type Values = {
 };
 
 export default defineComponent({
-	name: 'files-detail',
+	name: 'files-item',
 	beforeRouteLeave(to, from, next) {
 		const self = this as any;
 		const hasEdits = Object.keys(self.edits).length > 0;
@@ -451,7 +451,7 @@ export default defineComponent({
 	--v-button-color-hover: var(--primary);
 }
 
-.file-detail {
+.file-item {
 	padding: var(--content-padding);
 	padding-bottom: var(--content-padding-bottom);
 }

app/src/modules/settings/index.ts

@@ -1,19 +1,19 @@
 import { defineModule } from '@/modules/define';
-import SettingsProject from './routes/project/project.vue';
-import SettingsCollections from './routes/data-model/collections/collections.vue';
-import SettingsNewCollection from './routes/data-model/new-collection.vue';
-import SettingsFields from './routes/data-model/fields/fields.vue';
-import SettingsFieldDetail from './routes/data-model/field-detail/field-detail.vue';
-import SettingsRolesBrowse from './routes/roles/browse.vue';
-import SettingsRolesPublicDetail from './routes/roles/public-detail.vue';
-import SettingsRolesPermissionsDetail from './routes/roles/permissions-detail/permissions-detail.vue';
-import SettingsRolesDetail from './routes/roles/detail/detail.vue';
-import SettingsPresetsBrowse from './routes/presets/browse/browse.vue';
-import SettingsPresetsDetail from './routes/presets/detail.vue';
-import SettingsWebhooksBrowse from './routes/webhooks/browse.vue';
-import SettingsWebhooksDetail from './routes/webhooks/detail.vue';
-import SettingsNewRole from './routes/roles/add-new.vue';
-import SettingsNotFound from './routes/not-found.vue';
+import Project from './routes/project/project.vue';
+import Collections from './routes/data-model/collections/collections.vue';
+import NewCollection from './routes/data-model/new-collection.vue';
+import Fields from './routes/data-model/fields/fields.vue';
+import FieldDetail from './routes/data-model/field-detail/field-detail.vue';
+import RolesCollection from './routes/roles/collection.vue';
+import RolesPublicItem from './routes/roles/public-item.vue';
+import RolesPermissionsDetail from './routes/roles/permissions-detail/permissions-detail.vue';
+import RolesItem from './routes/roles/item/item.vue';
+import PresetsCollection from './routes/presets/collection/collection.vue';
+import PresetsItem from './routes/presets/item.vue';
+import WebhooksCollection from './routes/webhooks/collection.vue';
+import WebhooksItem from './routes/webhooks/item.vue';
+import NewRole from './routes/roles/add-new.vue';
+import NotFound from './routes/not-found.vue';
 import api from '@/api';
 import { useCollection } from '@/composables/use-collection';
 import { ref } from '@vue/composition-api';
@@ -32,12 +32,12 @@ export default defineModule(({ i18n }) => ({
 		{
 			name: 'settings-project',
 			path: '/project',
-			component: SettingsProject,
+			component: Project,
 		},
 		{
 			name: 'settings-collections',
 			path: '/data-model',
-			component: SettingsCollections,
+			component: Collections,
 			beforeEnter(to, from, next) {
 				const collectionsStore = useCollectionsStore();
 				collectionsStore.hydrate();
@@ -48,7 +48,7 @@ export default defineModule(({ i18n }) => ({
 					path: '+',
 					name: 'settings-add-new',
 					components: {
-						add: SettingsNewCollection,
+						add: NewCollection,
 					},
 				},
 			],
@@ -56,7 +56,7 @@ export default defineModule(({ i18n }) => ({
 		{
 			name: 'settings-fields',
 			path: '/data-model/:collection',
-			component: SettingsFields,
+			component: Fields,
 			async beforeEnter(to, from, next) {
 				const { info } = useCollection(ref(to.params.collection));
 				const fieldsStore = useFieldsStore();
@@ -79,78 +79,78 @@ export default defineModule(({ i18n }) => ({
 					path: ':field',
 					name: 'settings-fields-field',
 					components: {
-						field: SettingsFieldDetail,
+						field: FieldDetail,
 					},
 				},
 			],
 		},
 		{
-			name: 'settings-roles-browse',
+			name: 'settings-roles-collection',
 			path: '/roles',
-			component: SettingsRolesBrowse,
+			component: RolesCollection,
 			children: [
 				{
 					path: '+',
 					name: 'settings-add-new-role',
 					components: {
-						add: SettingsNewRole,
+						add: NewRole,
 					},
 				},
 			],
 		},
 		{
 			path: '/roles/public',
-			component: SettingsRolesPublicDetail,
+			component: RolesPublicItem,
 			props: true,
 			children: [
 				{
 					path: ':permissionKey',
 					components: {
-						permissionsDetail: SettingsRolesPermissionsDetail,
+						permissionsDetail: RolesPermissionsDetail,
 					},
 				},
 			],
 		},
 		{
-			name: 'settings-roles-detail',
+			name: 'settings-roles-item',
 			path: '/roles/:primaryKey',
-			component: SettingsRolesDetail,
+			component: RolesItem,
 			props: true,
 			children: [
 				{
 					path: ':permissionKey',
 					components: {
-						permissionsDetail: SettingsRolesPermissionsDetail,
+						permissionsDetail: RolesPermissionsDetail,
 					},
 				},
 			],
 		},
 		{
-			name: 'settings-presets-browse',
+			name: 'settings-presets-collection',
 			path: '/presets',
-			component: SettingsPresetsBrowse,
+			component: PresetsCollection,
 		},
 		{
-			name: 'settings-presets-detail',
+			name: 'settings-presets-item',
 			path: '/presets/:id',
-			component: SettingsPresetsDetail,
+			component: PresetsItem,
 			props: true,
 		},
 		{
-			name: 'settings-webhooks-browse',
+			name: 'settings-webhooks-collection',
 			path: '/webhooks',
-			component: SettingsWebhooksBrowse,
+			component: WebhooksCollection,
 		},
 		{
-			name: 'settings-webhooks-detail',
+			name: 'settings-webhooks-item',
 			path: '/webhooks/:primaryKey',
-			component: SettingsWebhooksDetail,
+			component: WebhooksItem,
 			props: true,
 		},
 		{
 			name: 'settings-not-found',
 			path: '*',
-			component: SettingsNotFound,
+			component: NotFound,
 		},
 	],
 	preRegisterCheck: (user) => {

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

@@ -52,7 +52,7 @@
 			<settings-navigation />
 		</template>
 
-		<div class="collections-detail">
+		<div class="collections-item">
 			<div class="fields">
 				<h2 class="title type-label">
 					{{ $t('fields_and_layout') }}
@@ -173,7 +173,7 @@ export default defineComponent({
 	}
 }
 
-.collections-detail {
+.collections-item {
 	padding: var(--content-padding);
 	padding-top: 0;
 	padding-bottom: var(--content-padding-bottom);

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

@@ -39,7 +39,7 @@
 			<settings-navigation />
 		</template>
 
-		<div class="presets-browse">
+		<div class="presets-collection">
 			<v-info
 				center
 				type="warning"
@@ -302,7 +302,7 @@ export default defineComponent({
 	--v-button-color-hover: var(--danger);
 }
 
-.presets-browse {
+.presets-collection {
 	padding: var(--content-padding);
 	padding-top: 0;
 }

app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue

@@ -13,8 +13,7 @@
 
 		<v-divider />
 
-		<div class="page-description" v-html="marked($t('page_help_settings_presets_browse'))" />
-
+		<div class="page-description" v-html="marked($t('page_help_settings_presets_collection'))" />
 	</drawer-detail>
 </template>
 

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

@@ -52,7 +52,7 @@
 			</v-button>
 		</template>
 
-		<div class="preset-detail">
+		<div class="preset-item">
 			<v-form
 				:fields="fields"
 				:loading="loading"
@@ -77,7 +77,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_settings_presets_detail'))" />
+				<div class="page-description" v-html="marked($t('page_help_settings_presets_item'))" />
 			</drawer-detail>
 
 			<portal-target class="layout-drawer" name="drawer" />
@@ -533,7 +533,7 @@ export default defineComponent({
 	--v-button-color-hover: var(--danger);
 }
 
-.preset-detail {
+.preset-item {
 	padding: var(--content-padding);
 	padding-bottom: var(--content-padding-bottom);
 }

app/src/modules/settings/routes/roles/collection.vue

@@ -20,7 +20,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_settings_roles_browse'))" />
+				<div class="page-description" v-html="marked($t('page_help_settings_roles_collection'))" />
 			</drawer-detail>
 		</template>
 
@@ -75,7 +75,7 @@ type Role = {
 };
 
 export default defineComponent({
-	name: 'roles-browse',
+	name: 'roles-collection',
 	components: { SettingsNavigation, ValueNull },
 	props: {},
 	setup() {

app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue

@@ -9,7 +9,7 @@
 
 		<v-divider />
 
-		<div class="page-description" v-html="marked($t('page_help_settings_roles_detail'))" />
+		<div class="page-description" v-html="marked($t('page_help_settings_roles_item'))" />
 	</drawer-detail>
 </template>
 

app/src/modules/settings/routes/roles/item/item.vue

@@ -90,7 +90,7 @@ type Values = {
 };
 
 export default defineComponent({
-	name: 'roles-detail',
+	name: 'roles-item',
 	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoDrawerDetail, PermissionsOverview },
 	props: {
 		primaryKey: {

app/src/modules/settings/routes/roles/public-item.vue

@@ -22,10 +22,10 @@ import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 
 import SettingsNavigation from '../../components/navigation.vue';
 import router from '@/router';
-import PermissionsOverview from './detail/components/permissions-overview.vue';
+import PermissionsOverview from './item/components/permissions-overview.vue';
 
 export default defineComponent({
-	name: 'roles-detail',
+	name: 'roles-item',
 	components: { SettingsNavigation, PermissionsOverview },
 	props: {
 		permissionKey: {

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

@@ -87,7 +87,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_browse'))" />
+				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_collection'))" />
 			</drawer-detail>
 			<layout-drawer-detail />
 			<portal-target name="drawer" />
@@ -111,7 +111,7 @@ type Item = {
 };
 
 export default defineComponent({
-	name: 'webhooks-browse',
+	name: 'webhooks-collection',
 	components: { SettingsNavigation, LayoutDrawerDetail, SearchInput },
 	setup(props) {
 		const layoutRef = ref<LayoutComponent | null>(null);
@@ -179,7 +179,7 @@ export default defineComponent({
 			filters.value = [];
 			searchQuery.value = null;
 		}
-	}
+	},
 });
 </script>
 

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

@@ -60,7 +60,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_detail'))" />
+				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_item'))" />
 			</drawer-detail>
 			<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
 		</template>
@@ -83,7 +83,7 @@ type Values = {
 };
 
 export default defineComponent({
-	name: 'webhooks-detail',
+	name: 'webhooks-item',
 	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions },
 	props: {
 		primaryKey: {

app/src/modules/users/components/user-info-drawer-detail.vue

@@ -31,7 +31,7 @@
 
 		<v-divider />
 
-		<div class="page-description" v-html="marked($t('page_help_users_detail'))" />
+		<div class="page-description" v-html="marked($t('page_help_users_item'))" />
 	</drawer-detail>
 </template>
 

app/src/modules/users/index.ts

@@ -1,7 +1,7 @@
 import { defineModule } from '@/modules/define';
 
-import UsersBrowse from './routes/browse.vue';
-import UsersDetail from './routes/detail.vue';
+import Collection from './routes/collection.vue';
+import Item from './routes/item.vue';
 
 export default defineModule(({ i18n }) => ({
 	id: 'users',
@@ -9,17 +9,17 @@ export default defineModule(({ i18n }) => ({
 	icon: 'people_alt',
 	routes: [
 		{
-			name: 'users-browse-all',
+			name: 'users-collection',
 			path: '/',
-			component: UsersBrowse,
+			component: Collection,
 			props: (route) => ({
 				queryFilters: route.query,
 			}),
 		},
 		{
-			name: 'users-detail',
+			name: 'users-item',
 			path: '/:primaryKey',
-			component: UsersDetail,
+			component: Item,
 			props: (route) => ({
 				primaryKey: route.params.primaryKey,
 				preset: route.query,

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

@@ -93,7 +93,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="page-description" v-html="marked($t('page_help_users_browse'))" />
+				<div class="page-description" v-html="marked($t('page_help_users_collection'))" />
 			</drawer-detail>
 			<layout-drawer-detail @input="layout = $event" :value="layout" />
 			<portal-target name="drawer" />
@@ -119,7 +119,7 @@ type Item = {
 };
 
 export default defineComponent({
-	name: 'users-browse',
+	name: 'users-collection',
 	components: { UsersNavigation, LayoutDrawerDetail, SearchInput },
 	props: {
 		queryFilters: {

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

@@ -97,7 +97,7 @@
 			<users-navigation :current-role="(item && item.role) || (preset && preset.role)" />
 		</template>
 
-		<div class="user-detail">
+		<div class="user-item">
 			<div class="user-box" v-if="isNew === false">
 				<div class="avatar">
 					<v-skeleton-loader v-if="loading || previewLoading" />
@@ -184,7 +184,7 @@ type Values = {
 };
 
 export default defineComponent({
-	name: 'users-detail',
+	name: 'users-item',
 	beforeRouteLeave(to, from, next) {
 		const self = this as any;
 		const hasEdits = Object.keys(self.edits).length > 0;
@@ -482,7 +482,7 @@ export default defineComponent({
 	--v-button-background-color: var(--background-normal);
 }
 
-.user-detail {
+.user-item {
 	padding: var(--content-padding);
 	padding-bottom: var(--content-padding-bottom);
 }

app/src/views/private/components/modal-browse/index.ts

@@ -1,4 +0,0 @@
-import ModalBrowse from './modal-browse.vue';
-
-export { ModalBrowse };
-export default ModalBrowse;

app/src/views/private/components/modal-collection/index.ts

@@ -0,0 +1,4 @@
+import ModalCollection from './modal-collection.vue';
+
+export { ModalCollection };
+export default ModalCollection;

app/src/views/private/components/modal-detail/index.ts

@@ -1,4 +0,0 @@
-import ModalDetail from './modal-detail.vue';
-
-export { ModalDetail };
-export default ModalDetail;

app/src/views/private/components/modal-item/index.ts

@@ -0,0 +1,4 @@
+import ModalItem from './modal-item.vue';
+
+export { ModalItem };
+export default ModalItem;

app/src/views/private/components/modal-item/modal-item.vue

@@ -75,7 +75,12 @@ export default defineComponent({
 		const relationsStore = useRelationsStore();
 
 		const { _active } = useActiveState();
-		const { junctionFieldInfo, junctionRelatedCollection, junctionRelatedCollectionInfo, setJunctionEdits } = useJunction();
+		const {
+			junctionFieldInfo,
+			junctionRelatedCollection,
+			junctionRelatedCollectionInfo,
+			setJunctionEdits,
+		} = useJunction();
 		const { _edits, loading, error, item } = useItem();
 		const { save, cancel } = useActions();
 
@@ -85,14 +90,22 @@ export default defineComponent({
 
 		const title = computed(() => {
 			if (props.primaryKey === '+') {
-				return i18n.t('creating_in', { collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name });
+				return i18n.t('creating_in', {
+					collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name,
+				});
 			}
 
-			return i18n.t('editing_in', { collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name });
+			return i18n.t('editing_in', {
+				collection: junctionRelatedCollectionInfo?.value?.name || collectionInfo.value?.name,
+			});
 		});
 
 		const showDivider = computed(() => {
-			return fieldsStore.getFieldsForCollection(props.collection).filter((field: Field) => field.meta?.hidden !== true).length > 0;
+			return (
+				fieldsStore
+					.getFieldsForCollection(props.collection)
+					.filter((field: Field) => field.meta?.hidden !== true).length > 0
+			);
 		});
 
 		return {